/* ============================================================
   WHY KNOT YARN — home.css
   ------------------------------------------------------------
   HOME TAB ONLY (index.html). Load after base.css.
   Covers: About Us + lede, "Where you've seen us" events grid,
   Featured tutorials strip, the About/Follow-along sidebar card,
   the "Most beginners don't fail..." problem strip, and the
   "Everything lives in three tabs" who-grid.
   ============================================================ */

  /* ---------- Home: About / Events / Featured + sidebar ---------- */
  .home-main{
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 56px;
    align-items: start;
    padding-top: 48px;
  }
  @media (max-width: 900px){
    .home-main{ grid-template-columns: 1fr; gap: 40px; padding-top: 28px; }
  }

  .about-block .eyebrow{
    display: block;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--berry);
    margin-bottom: 10px;
  }
  .about-block h1{
    font-size: clamp(32px, 4.2vw, 46px);
    line-height: 1.08;
  }
  .about-block .lede{
    margin-top: 18px;
    font-size: 17px;
    color: var(--ink-soft);
    max-width: 56ch;
  }

  .events-block{ padding-top: 44px; }
  .event-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  @media (max-width: 720px){ .event-grid{ grid-template-columns: 1fr; } }
  .event-card{
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .event-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43,38,32,0.10); }
  .event-thumb{
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--berry), var(--pink) 60%, var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .event-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
  }
  .event-card:hover .event-thumb img{ transform: scale(1.05); }
  .event-body{ padding: 16px 18px 18px; }
  .event-body h3{ font-size: 15.5px; font-weight: 500; }
  .event-meta{ font-size: 12.5px; color: var(--berry); margin: 6px 0 0; }
  .event-desc{ font-size: 13.5px; color: var(--ink-soft); margin: 6px 0 0; }

  .featured-block{ padding-top: 44px; }

  /* ---------- Featured tutorials, cinematic 3D coverflow ----------
     All FEATURED_IDS are built once as persistent .coverflow-card
     elements (see buildFeaturedCards in home.js) and positioned on
     top of each other in the center of the track. Which one is
     "active" is purely a class assigned by updateFeaturedRoles —
     cf-active / cf-prev / cf-next / cf-far — so moving to another
     slide just reassigns classes and the transform transition below
     carries every card smoothly to its new spot, forward or back in
     perspective, like cards floating in space. Hovering a side card
     noses it forward with a springy overshoot. ---------- */
  .featured-carousel{ position: relative; }
  .featured-viewport{
    display: flex;
    justify-content: center;
    overflow: visible;
    padding: 70px 0 90px;
    perspective: 1600px;
  }
  .featured-grid{
    position: relative;
    width: min(700px, 94vw);
    height: 400px;
    transform-style: preserve-3d;
  }
  .coverflow-card{
    position: absolute;
    top: 0;
    left: 50%;
    width: 260px;
    max-width: 74vw;
    transform-style: preserve-3d;
    transition:
      transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.5s ease,
      opacity 0.45s ease,
      filter 0.45s ease;
    will-change: transform;
  }

  /* Active: faces the viewer straight-on, slightly enlarged, closest
     in perspective, with the strongest and tightest shadow. */
  .coverflow-card.cf-active{
    transform: translate(-50%, 0) translateZ(50px) rotateY(0deg) scale(1.08);
    z-index: 5;
    opacity: 1;
    filter: none;
    box-shadow:
      0 0 0 1px rgba(122,53,99,0.16),
      0 46px 80px -20px rgba(122,53,99,0.6),
      0 0 110px rgba(201,122,155,0.55);
  }

  /* Prev/next: rotated subtly on the Y-axis and pushed back in
     perspective, dimmer and softer-shadowed to read as further away. */
  .coverflow-card.cf-prev,
  .coverflow-card.cf-next{
    z-index: 3;
    opacity: 0.68;
    filter: brightness(0.88) saturate(0.85);
    box-shadow:
      0 0 0 1px rgba(43,38,32,0.06),
      0 22px 40px -18px rgba(43,38,32,0.4);
  }
  .coverflow-card.cf-prev{
    transform: translate(-50%, 0) translateX(-170px) translateZ(-140px) rotateY(36deg) scale(0.84);
  }
  .coverflow-card.cf-next{
    transform: translate(-50%, 0) translateX(170px) translateZ(-140px) rotateY(-36deg) scale(0.84);
  }

  /* Anything further out sits hidden, further back still, ready to
     glide into a cf-prev/cf-next slot the moment it's its turn. */
  .coverflow-card.cf-far{
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    filter: brightness(0.8) saturate(0.8);
  }
  .coverflow-card.cf-far.cf-far-prev{
    transform: translate(-50%, 0) translateX(-260px) translateZ(-280px) rotateY(46deg) scale(0.7);
  }
  .coverflow-card.cf-far.cf-far-next{
    transform: translate(-50%, 0) translateX(260px) translateZ(-280px) rotateY(-46deg) scale(0.7);
  }

  /* Hover a side card: it noses forward toward the center — a
     natural, slightly overshooting spring (the cubic-bezier above
     already gives that bounce) rather than a linear ease. */
  .coverflow-card.cf-prev:hover,
  .coverflow-card.cf-prev:focus-within{
    transform: translate(-50%, 0) translateX(-95px) translateZ(-10px) rotateY(16deg) scale(1);
    z-index: 6;
    opacity: 1;
    filter: none;
    box-shadow:
      0 0 0 1px rgba(122,53,99,0.14),
      0 34px 60px -18px rgba(122,53,99,0.5);
  }
  .coverflow-card.cf-next:hover,
  .coverflow-card.cf-next:focus-within{
    transform: translate(-50%, 0) translateX(95px) translateZ(-10px) rotateY(-16deg) scale(1);
    z-index: 6;
    opacity: 1;
    filter: none;
    box-shadow:
      0 0 0 1px rgba(122,53,99,0.14),
      0 34px 60px -18px rgba(122,53,99,0.5);
  }

  .coverflow-card .pattern-thumb{ aspect-ratio: 1/1; }

  @media (max-width: 640px){
    .featured-grid{ height: 340px; }
    .coverflow-card{ width: 220px; }
    .coverflow-card.cf-prev{ transform: translate(-50%, 0) translateX(-110px) translateZ(-120px) rotateY(34deg) scale(0.78); }
    .coverflow-card.cf-next{ transform: translate(-50%, 0) translateX(110px) translateZ(-120px) rotateY(-34deg) scale(0.78); }
    .coverflow-card.cf-prev:hover{ transform: translate(-50%, 0) translateX(-60px) translateZ(-10px) rotateY(14deg) scale(0.94); }
    .coverflow-card.cf-next:hover{ transform: translate(-50%, 0) translateX(60px) translateZ(-10px) rotateY(-14deg) scale(0.94); }
  }
  @media (max-width: 480px){
    .coverflow-card.cf-active{ transform: translate(-50%, 0) translateZ(50px) rotateY(0deg) scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .coverflow-card{ transition: opacity 0.3s ease; }
  }

  .carousel-nav{
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(43,38,32,0.55);
    color: var(--paper);
    cursor: pointer;
    z-index: 10;
    transition: background 0.15s, opacity 0.15s;
  }
  .carousel-nav:hover{ background: var(--berry); }
  .carousel-nav.prev{ left: -6px; }
  .carousel-nav.next{ right: -6px; }
  .carousel-nav:active{ transform: translateY(-50%) scale(0.92); }
  /* Buttons stay visible at every width now — with only one card
     shown at a time, they're the only way to move to the next one. */
  @media (max-width: 640px){
    .carousel-nav.prev{ left: 2px; }
    .carousel-nav.next{ right: 2px; }
  }

  .see-more{ font-weight: 500; margin-top: 10px; display: inline-block; }

  .home-sidebar{ position: sticky; top: 92px; display: flex; justify-content: center; }
  @media (max-width: 900px){ .home-sidebar{ position: static; } }

  /* ---------- About Us, rendered as an iPhone screen ---------- */
  .iphone{
    --bezel: #1b1b1d;
    width: 300px;
    height: 610px;
    background: var(--bezel);
    border-radius: 52px;
    padding: 14px;
    position: relative;
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.06) inset,
      0 30px 60px rgba(43,38,32,0.28),
      0 8px 18px rgba(43,38,32,0.16);
  }
  .iphone-island{
    position: absolute;
    top: 26px; left: 50%;
    transform: translateX(-50%);
    width: 90px; height: 26px;
    background: var(--bezel);
    border-radius: 20px;
    z-index: 3;
  }
  .iphone-screen{
    position: relative;
    width: 100%; height: 100%;
    background: var(--paper);
    border-radius: 38px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Work Sans', sans-serif;
  }

  .ios-statusbar{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 26px 4px;
    color: var(--ink);
  }
  .ios-time{ font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
  .ios-status-icons{ display: flex; align-items: center; gap: 5px; }

  .ios-navbar{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 6px 16px 10px;
    border-bottom: 1px solid var(--line);
  }
  .ios-navback{
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 500;
    color: var(--berry);
    flex: 1;
  }
  .ios-navtitle{
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    flex: 1.4;
    text-align: center;
  }
  .ios-navspacer{ flex: 1; }

  .ios-scroll{
    flex: 1;
    overflow-y: auto;
    padding: 18px 18px 14px;
    scrollbar-width: none;
  }
  .ios-scroll::-webkit-scrollbar{ display: none; }

  .ios-profile{ text-align: center; margin-bottom: 16px; }
  .ios-avatar{
    width: 64px; height: 64px;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(43,38,32,0.08);
    margin-bottom: 8px;
  }
  .ios-profile h3{ font-size: 15px; font-weight: 600; color: var(--ink); }
  .ios-handle{ font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 0; }

  .ios-card{
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(43,38,32,0.06);
  }
  .ios-bio{ padding: 14px 16px; margin-bottom: 18px; }
  .ios-bio p{ font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
  .ios-bio p + p{ margin-top: 10px; }

  .ios-section-label{
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 0 4px 6px;
  }
  .ios-list{ padding: 4px 0; overflow: hidden; }
  .ios-row{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    transition: background 0.15s;
  }
  .ios-row:last-child{ border-bottom: none; }
  .ios-row:hover{ background: var(--paper); }
  .ios-row-icon{
    width: 30px; height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .ios-icon-fb{ background: #1877F2; }
  .ios-icon-ig{ background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
  .ios-icon-tt{ background: #000; }
  .ios-row-label{ font-size: 13.5px; font-weight: 500; flex: 1; }
  .ios-chevron{ color: var(--ink-soft); flex-shrink: 0; }

  .iphone-home-indicator{
    position: absolute;
    bottom: 8px; left: 50%;
    transform: translateX(-50%);
    width: 120px; height: 5px;
    border-radius: 3px;
    background: var(--ink);
    opacity: 0.85;
  }


  /* ---------- Problem strip ---------- */
  .problem{
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: start;
  }
  @media (max-width: 860px){ .problem{ grid-template-columns: 1fr; gap: 30px; } }
  .problem .lead{
    font-family: "Fraunces", serif;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 500;
  }
  .problem .lead em{
    font-style: italic;
    color: var(--berry);
  }
  .scatter-list{ list-style: none; margin: 0; padding: 0; }
  .scatter-list li{
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    color: var(--ink-soft);
  }
  .scatter-list li:first-child{ padding-top: 0; }
  .scatter-list strong{ color: var(--ink); font-weight: 500; min-width: 128px; }