/* =========================================================================
   Wino Techie · landing page styles
   Design system inherited from the article pages in /blogs/wine_endures/.
   Editorial / refined: serif body, sans-serif chrome, narrow reading column.
   ========================================================================= */

/* --- Design tokens (kept identical to the article pages) ----------------- */
:root{
  --ink:#1d1a17;     /* primary text                  */
  --muted:#6b635b;   /* secondary text                */
  --paper:#fbf9f5;   /* page background               */
  --claret:#7b1e2b;  /* accent: links, buttons, kickers */
  --rule:#e4ddd2;    /* hairline borders              */

  /* landing-page-only helpers, derived from the palette */
  --claret-dark:#5f1721;
  --card-bg:#ffffff;
  --shadow:0 1px 2px rgba(29,26,23,.04), 0 8px 24px rgba(29,26,23,.06);

  --serif:Georgia,'Iowan Old Style','Palatino Linotype',serif;
  --sans:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  --col:720px;        /* narrow reading column for text  */
  --col-wide:1080px;  /* wider column for the post grid  */
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* --- Shared layout helpers ----------------------------------------------- */
.wrap{max-width:var(--col);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:var(--col-wide);margin:0 auto;padding:0 24px}

.kicker{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--claret);
  font-weight:700;
  margin:0 0 14px;
}

/* Skip link for keyboard / screen-reader users */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--claret);color:#fff;
  font-family:var(--sans);font-size:.9rem;
  padding:10px 16px;border-radius:0 0 8px 0;z-index:100;
}
.skip-link:focus{left:0}

/* Visible focus states everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible{
  outline:2px solid var(--claret);
  outline-offset:3px;
  border-radius:3px;
}

/* --- Header / nav -------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,249,245,.88);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.site-header .wrap-wide{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:64px;
}
.brand{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.18rem;
  letter-spacing:-.01em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--claret)}
.brand{display:inline-flex;align-items:center}
.brand-logo{display:block;height:64px;width:auto}
.site-nav{
  display:flex;gap:26px;align-items:center;
  font-family:var(--sans);font-size:.9rem;
}
.site-nav a{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
}
.site-nav a:hover{color:var(--claret)}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  text-decoration:none;
  padding:13px 22px;
  border-radius:9px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-primary{background:var(--claret);color:#fff}
.btn-primary:hover{background:var(--claret-dark)}
/* Disabled buttons (e.g. Subscribe before the newsletter is live) read as muted. */
.btn:disabled,.btn[disabled]{
  background:var(--rule);
  color:var(--muted);
  border-color:var(--rule);
  cursor:not-allowed;
}
.btn:disabled:hover,.btn[disabled]:hover{background:var(--rule)}
.btn-secondary{
  background:transparent;
  color:var(--claret);
  border-color:var(--rule);
}
.btn-secondary:hover{border-color:var(--claret)}

/* --- Hero ---------------------------------------------------------------- */
.hero{padding:72px 0 16px;text-align:left}
.hero h1{
  font-size:3rem;
  line-height:1.1;
  letter-spacing:-.015em;
  margin:14px 0 18px;
}
.hero .tagline{
  font-size:1.35rem;
  color:var(--muted);
  font-style:italic;
  margin:0 0 20px;
}
.hero .lede{
  font-size:1.18rem;
  margin:0 0 30px;
  max-width:60ch;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}

/* Decorative hairline between major bands */
.band-rule{border:0;border-top:1px solid var(--rule);margin:0}

/* --- Section scaffolding ------------------------------------------------- */
.section{padding:64px 0}
.section-head{margin:0 0 32px}
.section-head h2{
  font-size:2rem;
  line-height:1.18;
  letter-spacing:-.01em;
  margin:6px 0 10px;
}
.section-head p{
  font-size:1.12rem;
  color:var(--muted);
  margin:0;
  max-width:62ch;
}

/* --- Topic grid (the series uses a slider instead; see below) ------------ */
.topic-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}

/* Topic cards are sometimes non-link <article>s (no live page yet); keep
   them feeling like cards but without the interactive lift/cursor. */
.card:not(a){cursor:default}
.card:not(a):hover{
  transform:none;
  box-shadow:var(--shadow);
  border-color:var(--rule);
}
/* "More soon" / "coming soon" affordances on non-link cards read as muted */
.card:not(a) .ep-go{color:var(--muted)}

.card{
  display:flex;
  flex-direction:column;
  background:var(--card-bg);
  border:1px solid var(--rule);
  border-radius:14px;
  padding:24px 22px;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(29,26,23,.06), 0 14px 34px rgba(29,26,23,.1);
  border-color:#d8cfc1;
}
.card .ep-kicker{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--claret);
  font-weight:700;
  margin:0 0 10px;
}
.card h3{
  font-size:1.3rem;
  line-height:1.22;
  letter-spacing:-.01em;
  margin:0 0 8px;
}
.card .ep-sub{
  font-size:1rem;
  color:var(--muted);
  font-style:italic;
  margin:0 0 16px;
}
.card .ep-go{
  margin-top:auto;
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:600;
  color:var(--claret);
}
.card:hover .ep-go .arrow{transform:translateX(4px)}
.card .ep-go .arrow{display:inline-block;transition:transform .18s ease}

/* Featured entry-point card (Episode 0) spans the full row on wide screens */
.card-feature{
  grid-column:1 / -1;
  background:linear-gradient(180deg,#fff 0%, #fffdf9 100%);
  border-color:#e7d4c5;
}
.card-feature .ep-badge{
  display:inline-block;
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:#fff;
  background:var(--claret);
  padding:4px 10px;
  border-radius:999px;
  margin:0 0 12px;
}
.card-feature h3{font-size:1.7rem}
.card-feature .ep-sub{font-size:1.08rem}

/* Standalone feature card (Episode 0, outside any grid) sits above the slider */
.card-feature--standalone{margin:0 0 28px}

/* --- "What I explore" topics band ---------------------------------------
   A deep claret band that fences this section off from the lighter series
   below, so the two no longer read as the same card grid. Layout is one
   flagship "hero" panel plus two supporting theme cards beside it. Panels
   are translucent white so they sit on the band. Each theme carries a small
   domain icon and a status pill (Live / In progress / Planned). */
.topics-band{background:linear-gradient(165deg,#7e2030 0%, #4d121b 100%)}
.topics-band .section-head .kicker{color:#eab4ba}
.topics-band .section-head h2{color:#fff}
.topics-band .section-head p{color:rgba(255,255,255,.78)}

/* Flagship hero (left, ~60%) + two stacked supporting cards (right) */
.topic-duo{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:stretch}
.topic-side{display:flex;flex-direction:column;gap:20px}
.topic-side .card{flex:1}

/* The hero is a brighter translucent panel that leads the row. It is not a
   .card (no live page yet), so its type is set explicitly here. */
.topic-hero{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);
  border-radius:16px;
  padding:36px 34px;
  color:#fff;
}
.topic-hero .ep-kicker{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:#f0c2c8;margin:0;
}
.topic-hero h3{font-size:2rem;line-height:1.15;letter-spacing:-.01em;margin:0 0 12px;color:#fff}
.topic-hero .ep-sub{font-size:1.1rem;font-style:italic;color:rgba(255,255,255,.82);margin:0 0 22px}
.topic-hero .ep-go{margin-top:auto;font-family:var(--sans);font-weight:600;font-size:.9rem;color:#fff}
.topic-hero .theme-icon{width:30px;height:30px;color:#f0c2c8}

/* Supporting theme cards: dimmer translucent panels (reuse the .card base) */
.topics-band .card{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:none;color:#fff;border-radius:14px;
}
.topics-band a.card:hover{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);
  transform:none;box-shadow:none;
}
.topics-band .card:not(a):hover{box-shadow:none;border-color:rgba(255,255,255,.15)}
.topics-band .card .ep-kicker{color:#f0c2c8}
.topics-band .card h3{color:#fff}
.topics-band .card .ep-sub{color:rgba(255,255,255,.8)}
.topics-band .card .ep-go{color:#fff}
.topics-band .card .theme-icon{color:#f0c2c8}

/* Icon + kicker + status share one row at the top of each panel */
.card-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.card-top .ep-kicker{margin:0}
.theme-icon{width:22px;height:22px;flex:none}

/* Status pills. Base shape is shared; colours below are tuned for the band. */
.status{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.topics-band .status--live{color:var(--claret);background:#fff}
.topics-band .status--progress{color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32)}
.topics-band .status--planned{color:rgba(255,255,255,.82);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}

/* --- Episode slider ------------------------------------------------------ */
.slider{position:relative}

.slider-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* padding keeps card hover-shadow + focus ring from being clipped */
  padding:6px 4px 18px;
  margin:0 -4px;
  scrollbar-width:thin;
  scrollbar-color:var(--rule) transparent;
}
.slider-track::-webkit-scrollbar{height:8px}
.slider-track::-webkit-scrollbar-thumb{background:var(--rule);border-radius:8px}
.slider-track::-webkit-scrollbar-track{background:transparent}
.slider-track:focus-visible{outline:2px solid var(--claret);outline-offset:2px;border-radius:8px}

/* Each slide shows ~2 per view on wide screens */
.slider-track .slide{
  flex:0 0 calc(50% - 10px);
  scroll-snap-align:start;
}

/* Controls */
.slider-controls{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:6px;
}
.slider-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  font-size:1.1rem;
  font-family:var(--sans);
  color:var(--claret);
  background:#fff;
  border:1px solid var(--rule);
  border-radius:999px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, opacity .15s ease;
}
.slider-btn:hover{border-color:var(--claret)}
.slider-btn:disabled{opacity:.35;cursor:default;border-color:var(--rule)}
/* When script.js finds everything fits, it hides the controls entirely */
.slider-controls[hidden]{display:none}

@media (max-width:760px){
  /* One card per view, with a peek of the next to signal more */
  .slider-track .slide{flex-basis:86%}
  /* Topics: hero and supporting cards stack to full width */
  .topic-duo{grid-template-columns:1fr}
}

/* --- Newsletter ---------------------------------------------------------- */
.newsletter{
  background:#fff;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.newsletter .section-head{text-align:center;margin-bottom:26px}
.newsletter .section-head p{margin:0 auto}
.newsletter-form{
  display:flex;
  gap:12px;
  max-width:520px;
  margin:0 auto;
  flex-wrap:wrap;
}
.newsletter-form label{
  position:absolute;left:-9999px; /* visually hidden, available to AT */
}
.newsletter-form input[type="email"]{
  flex:1 1 240px;
  font-family:var(--serif);
  font-size:1.05rem;
  padding:13px 16px;
  border:1px solid var(--rule);
  border-radius:9px;
  background:var(--paper);
  color:var(--ink);
}
.newsletter-form input[type="email"]:focus{
  border-color:var(--claret);
  outline:none;
  box-shadow:0 0 0 3px rgba(123,30,43,.12);
}
.newsletter-note{
  font-family:var(--sans);
  font-size:.82rem;
  color:var(--muted);
  text-align:center;
  margin:16px auto 0;
  max-width:420px;
}
/* Inline confirmation toggled by script.js */
.form-confirm{
  display:none;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--claret);
  text-align:center;
  margin:18px auto 0;
  max-width:520px;
  padding:14px 18px;
  background:#fdf4f0;
  border:1px solid #e7d4c5;
  border-radius:10px;
}
.form-confirm.is-visible{display:block}

/* --- About + social ------------------------------------------------------ */
.about p{font-size:1.12rem;margin:0 0 20px}
/* The closing "this is a hobby" note reads as a quiet aside: a claret left
   rule and a faint warm tint set it apart from the body without shouting. */
.about .about-note{
  font-size:1.04rem;
  color:var(--muted);
  background:#fbf4ee;
  border-left:3px solid var(--claret);
  border-radius:0 10px 10px 0;
  padding:18px 22px;
  margin:6px 0 24px;
}
.about .about-note strong{color:var(--claret);font-weight:700}
.social-links{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  padding:0;
  margin:24px 0 0;
}
.social-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:600;
  color:var(--claret);
  text-decoration:none;
  border:1px solid var(--rule);
  border-radius:9px;
  padding:9px 14px;
}
.social-links a:hover{border-color:var(--claret);background:#fff}
.social-links svg{width:18px;height:18px;fill:currentColor;flex:none}

/* --- Footer -------------------------------------------------------------- */
.site-footer{
  background:var(--ink);
  color:#d8d2ca;
  font-family:var(--sans);
  padding:40px 0;
}
.site-footer .wrap-wide{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
  justify-content:space-between;
}
.site-footer .copy{font-size:.85rem;color:#b6afa6;margin:0}
.footer-nav{display:flex;gap:22px;flex-wrap:wrap}
.footer-nav a{color:#d8d2ca;text-decoration:none;font-size:.85rem;font-weight:600}
.footer-nav a:hover{color:#fff}

/* --- Responsive tweaks --------------------------------------------------- */
@media (max-width:640px){
  /* Stack the header: logo on top, nav on a centered second row. The wide
     lockup logo also scales down so it never overflows narrow phones. */
  .site-header .wrap-wide{
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-height:0;
    padding-top:10px;
    padding-bottom:10px;
  }
  .brand-logo{height:44px}
  .site-nav{gap:18px;font-size:.85rem;justify-content:center;flex-wrap:wrap}

  .hero{padding:48px 0 8px}
  .hero h1{font-size:2.25rem}
  .hero .tagline{font-size:1.18rem}
  .section{padding:48px 0}
  .section-head h2{font-size:1.6rem}
  /* On the smallest screens the feature card matches normal cards */
  .card-feature h3{font-size:1.45rem}
  /* Tighten the topics hero on phones */
  .topic-hero{padding:28px 24px}
  .topic-hero h3{font-size:1.6rem}
}

@media (max-width:420px){
  .brand-logo{height:40px}
  .site-nav{gap:14px;font-size:.82rem}
  .hero h1{font-size:2rem}
}

/* --- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slider-track{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}