/* Self-hosted fonts (Fraunces + Inter, OFL) — no external requests; first paint never waits on a font CDN. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/fraunces-500.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fraunces-600.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/fraunces-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2');}

/* Junipero Coffee — Morning Light (production, from-scratch Premier build, COFFEE-TEST)
   Source of design truth: coffee-shop-design-morning-light-v1-2026-10-23.html (Kristen, seg 2.5). */

  :root{
    --cream:#FFFBF2; --oat:#EAC9A3; --terra:#9C4A1F; --terra-dark:#7E3A16;
    --esp:#2F2118; --sage:#7D8C6F; --sage-dark:#5F7052;
    --ink-soft:#5A4636; --card:#FFFFFF; --line:#EBDCC4;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:'Inter',system-ui,-apple-system,sans-serif; background:var(--cream); color:var(--esp); line-height:1.55; overflow-x:hidden;}
  h1,h2,h3,.display{font-family:'Fraunces',Georgia,serif; font-weight:600; line-height:1.12;}
  img,svg{display:block; max-width:100%;}
  a{color:var(--terra);}
  .wrap{max-width:1180px; margin:0 auto; padding:0 20px;}

  /* ---------- header ---------- */
  header.site{position:sticky; top:0; z-index:50; background:rgba(255,251,242,.96); border-bottom:1px solid var(--line);}
  .bar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0;}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--esp);}
  .brand .mark{width:38px; height:38px; flex:none;}
  .brand .name{font-family:'Fraunces',serif; font-weight:700; font-size:1.28rem; letter-spacing:.01em;}
  .brand .sub{display:block; font-family:'Inter',sans-serif; font-weight:600; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sage-dark);}
  nav.main{display:none;}
  nav.main a{color:var(--esp); text-decoration:none; font-weight:600; font-size:.95rem; margin-left:26px;}
  nav.main a:hover{color:var(--terra);}
  .btn{display:inline-block; background:var(--terra); color:#FFF7EA; font-weight:700; text-decoration:none; border-radius:999px; padding:13px 24px; font-size:1rem; border:0; cursor:pointer; text-align:center;}
  .btn:hover{background:var(--terra-dark);}
  .btn.small{padding:9px 18px; font-size:.9rem;}
  .btn.ghost{background:transparent; color:var(--terra); border:2px solid var(--terra);}
  .btn.ghost:hover{background:var(--terra); color:#FFF7EA;}

  /* ---------- hero ---------- */
  .hero{background:linear-gradient(180deg,#FFF3DC 0%, var(--cream) 78%); border-bottom:1px solid var(--line); overflow:hidden;}
  .hero .wrap{display:grid; grid-template-columns:1fr; gap:8px; padding-top:30px; padding-bottom:34px;}
  .kicker{font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage-dark); margin-bottom:12px;}
  .hero h1{font-size:2.55rem; margin-bottom:6px;}
  .hero .tag{font-family:'Fraunces',serif; font-size:1.55rem; font-weight:500; color:var(--terra); line-height:1.25; margin-bottom:16px;}
  .hero p.lede{font-size:1.06rem; color:var(--ink-soft); max-width:34em; margin-bottom:20px;}
  .hours-chip{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 16px; margin-bottom:22px; max-width:560px;}
  .hours-chip .dot{width:9px; height:9px; border-radius:50%; background:var(--sage); flex:none;}
  .hours-chip strong{font-size:.98rem;}
  .hours-chip span{color:var(--ink-soft); font-size:.95rem;}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
  .cta-note{font-size:.9rem; color:var(--ink-soft);}
  .hero-art{margin-top:14px;}
  .hero-art .scene{width:100%; height:auto; border-radius:22px; border:1px solid var(--line);}

  /* ---------- sections ---------- */
  section{padding:52px 0;}
  .sec-head{max-width:640px; margin-bottom:28px;}
  .sec-head h2{font-size:2rem; margin-bottom:8px;}
  .sec-head p{color:var(--ink-soft); font-size:1.02rem;}
  .alt{background:#FFF6E6;}
  .sage-band{background:var(--sage); color:#FDFBF3;}
  .sage-band .sec-head p{color:#EDF2E2;}

  /* menu */
  .menu-grid{display:grid; grid-template-columns:1fr; gap:6px 48px;}
  .item{display:flex; align-items:baseline; gap:10px; padding:11px 0; border-bottom:1px dashed var(--line);}
  .item .nm{font-weight:600; font-size:1.02rem;}
  .item .ds{display:block; font-weight:400; font-size:.9rem; color:var(--ink-soft);}
  .item .dots{flex:1; border-bottom:2px dotted #D9BE96; transform:translateY(-4px);}
  .item .pr{font-family:'Fraunces',serif; font-weight:700; color:var(--terra); font-size:1.05rem;}
  .tagpill{display:inline-block; background:var(--oat); color:var(--esp); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:2px 9px; margin-left:8px; vertical-align:2px;}
  .menu-note{margin-top:20px; font-size:.94rem; color:var(--ink-soft);}

  /* story */
  .story{display:grid; grid-template-columns:1fr; gap:26px; align-items:center;}
  .story .card-art{border-radius:22px; border:1px solid var(--line); width:100%; height:auto;}
  .story p{color:var(--ink-soft); margin-bottom:14px; font-size:1.03rem;}
  .story p strong{color:var(--esp);}

  /* reviews */
  .stars{color:var(--terra); font-size:1.25rem; letter-spacing:2px;}
  .rating-line{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:24px;}
  .rating-line .big{font-family:'Fraunces',serif; font-size:2rem; font-weight:700;}
  .rating-line .cnt{color:var(--ink-soft); font-size:.98rem;}
  .rev-grid{display:grid; grid-template-columns:1fr; gap:16px;}
  .rev{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px;}
  .rev p{font-size:1rem; margin:8px 0 12px;}
  .rev .who{font-weight:700; font-size:.9rem;}
  .rev .who span{color:var(--ink-soft); font-weight:500;}

  /* shop */
  .shop-grid{display:grid; grid-template-columns:1fr; gap:16px;}
  .prod{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:8px;}
  .prod .ic{font-size:1.7rem;}
  .prod h3{font-size:1.25rem;}
  .prod .price{font-family:'Fraunces',serif; font-weight:700; font-size:1.3rem; color:var(--terra);}
  .prod p{color:var(--ink-soft); font-size:.96rem; flex:1;}
  .stock{font-weight:700; color:var(--terra); font-size:.9rem;}
  .prod .btn{margin-top:6px;}

  /* list capture */
  .capture{display:grid; grid-template-columns:1fr; gap:22px; align-items:center;}
  .capture h2{font-size:2rem; margin-bottom:10px;}
  .capture p{color:#EDF2E2; font-size:1.03rem; max-width:32em;}
  .cap-form{background:#FDFBF3; border-radius:18px; padding:22px; color:var(--esp);}
  .cap-form label{font-weight:700; font-size:.92rem; display:block; margin-bottom:8px;}
  .cap-form .row{display:flex; flex-direction:column; gap:10px;}
  .cap-form input[type=email]{font:inherit; padding:13px 14px; border:1.5px solid #CDBFA4; border-radius:12px; width:100%; background:#fff;}
  .cap-form .fine{font-size:.84rem; color:var(--ink-soft); margin-top:10px;}

  /* visit */
  .visit{display:grid; grid-template-columns:1fr; gap:26px;}
  .hours-table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;}
  .hours-table td{padding:13px 18px; border-bottom:1px solid var(--line); font-size:1rem;}
  .hours-table tr:last-child td{border-bottom:0;}
  .hours-table td:last-child{text-align:right; font-weight:700;}
  .hours-table tr.weekend td{background:#FFF6E6;}
  .visit p{color:var(--ink-soft); margin-bottom:12px;}

  /* footer */
  footer.site{background:var(--esp); color:#EFE6D8; padding:44px 0 30px;}
  footer.site .cols{display:grid; grid-template-columns:1fr; gap:26px;}
  footer.site h3{color:#fff; font-size:1.15rem; margin-bottom:10px;}
  footer.site a{color:#EAC9A3; text-decoration:none;}
  footer.site p, footer.site li{font-size:.95rem; color:#D8C9B4;}
  footer.site ul{list-style:none;}
  footer.site li{margin-bottom:7px;}
  .foot-base{border-top:1px solid #4A382A; margin-top:30px; padding-top:18px; font-size:.86rem; color:#B9A88F; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;}

  /* ---------- desktop ---------- */
  @media (min-width:760px){
    nav.main{display:block;}
    .hero .wrap{grid-template-columns:1.05fr .95fr; align-items:center; gap:44px; padding-top:52px; padding-bottom:56px;}
    .hero h1{font-size:3.4rem;}
    .hero .tag{font-size:1.9rem;}
    .hero-art{margin-top:0;}
    .menu-grid{grid-template-columns:1fr 1fr;}
    .story{grid-template-columns:.95fr 1.05fr; gap:44px;}
    .rev-grid{grid-template-columns:repeat(3,1fr);}
    .shop-grid{grid-template-columns:repeat(3,1fr);}
    .capture{grid-template-columns:1.05fr .95fr; gap:44px;}
    .cap-form .row{flex-direction:row;}
    .cap-form .row .btn{flex:none;}
    .visit{grid-template-columns:1fr 1fr; gap:44px;}
    footer.site .cols{grid-template-columns:1.2fr 1fr 1fr;}
    section{padding:68px 0;}
  }

  /* ---------- Breathing Hero layers + production additions ---------- */
  .hero-art{position:relative;}
  .bh-canvas{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 400ms ease; pointer-events:none; border-radius:22px;}
  .scene .sun{transform-origin:470px 120px; transform-box:view-box; animation:sunbreath 7s ease-in-out infinite alternate;}
  @keyframes sunbreath{from{transform:scale(1)}to{transform:scale(1.035)}}
  @media (prefers-reduced-motion: reduce){
    .scene .sun{animation:none;}
    html{scroll-behavior:auto;}
  }
  .skip{position:absolute; left:-9999px; top:0; background:var(--esp); color:#fff; padding:10px 16px; z-index:99; border-radius:0 0 12px 0;}
  .skip:focus{left:0;}
  a:focus-visible, button:focus-visible, input:focus-visible{outline:3px solid var(--sage-dark); outline-offset:2px;}
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
  .form-msg{font-size:.95rem; font-weight:600; margin-top:10px; min-height:1.4em;}
  .form-msg.ok{color:var(--sage-dark);}
  .cap-form .form-msg.ok{color:#3E5A33;}
  .form-msg.err{color:#8A2E12;}

  /* ---------- Scene v2: dawn over the neighborhood (Brad art direction, 08:28 PT) ---------- */
  .hero-art .scene{position:relative; z-index:1;}
  .bh-canvas{z-index:4;}
  .photo-card{position:absolute; left:-8px; bottom:-14px; width:35%; height:57%; background:#FFFDF8; padding:8px 8px 8px; border-radius:8px; box-shadow:0 18px 38px rgba(47,33,24,.30); transform:rotate(-2.6deg); z-index:3;}
  .photo-card img{width:100%; height:calc(100% - 24px); object-fit:cover; object-position:50% 30%; border-radius:4px;}
  .photo-card figcaption{font-family:'Fraunces',serif; font-size:.78rem; color:var(--ink-soft); text-align:center; padding-top:5px;}
  .clouds{animation:cloud-drift 26s ease-in-out infinite alternate;}
  @keyframes cloud-drift{from{transform:translateX(-9px)}to{transform:translateX(15px)}}
  .birds{animation:bird-cross 54s linear infinite; opacity:0;}
  @keyframes bird-cross{0%{transform:translate(-90px,0); opacity:0}7%{opacity:.85}50%{transform:translate(280px,-16px)}93%{opacity:.85}100%{transform:translate(690px,6px); opacity:0}}
  @media (prefers-reduced-motion: reduce){ .clouds,.birds{animation:none;} .birds{opacity:.85; transform:translate(240px,-10px);} }
  img.photo{display:block; width:100%; height:auto; border-radius:22px; border:1px solid var(--line);}
  .photo-banner{width:100%; height:150px; object-fit:cover; object-position:50% 58%; border-radius:18px; border:1px solid var(--line); margin-bottom:26px;}
  @media (min-width:760px){ .photo-banner{height:230px;} }
  .visit-photo{width:100%; height:auto; border-radius:18px; border:1px solid var(--line); margin-bottom:18px;}
  .foot-base .credits{flex-basis:100%; font-size:.8rem; color:#9C8B74;}