/* ============================================================
   強尼玫瑰衝浪 — Johnny Rose Surf
   Vintage Surf brand system (shared)
   ============================================================ */

:root{
  /* paper / surface */
  --paper:#f4ead6;        /* main warm cream */
  --paper-hi:#fdfbf3;     /* near-white, matches logo bg */
  --card:#fffdf6;         /* card surface */
  --card-2:#fbf4e6;

  /* ink */
  --ink:#382f25;          /* warm near-black */
  --ink-soft:#5f4f3b;

  /* brand */
  --brown:#8a7355;        /* primary brand brown */
  --brown-d:#5e4a34;
  --brown-faded:#857660;  /* logo-matched taupe */

  --teal:#3f8b85;         /* secondary */
  --teal-d:#2a625c;
  --teal-soft:#e2ece7;
  --teal-faded:#7a9691;   /* logo-matched board */

  --sand:#d6b884;         /* gold / tan accent */
  --sand-d:#b9954f;

  --coral:#d4744a;        /* sunset CTA accent */
  --coral-d:#bb5d36;
  --coral-soft:#f7e4d6;

  --sun:#e0a23c;          /* mustard sun */

  /* utility */
  --muted:#8c7c64;        /* warm muted text */
  --line:#e6d6b6;         /* warm hairline */
  --line-soft:#efe2c9;
  --danger:#b5482f;
  --danger-soft:#f4e0d8;

  --r:14px;
  --r-sm:9px;
  --r-lg:20px;
  --shadow:0 10px 30px -12px rgba(94,74,52,.28);
  --shadow-sm:0 4px 14px -8px rgba(94,74,52,.30);

  --ff-disp:'Bebas Neue',sans-serif;
  --ff-head:'Noto Serif TC',serif;
  --ff-body:'Noto Sans TC','DM Sans',sans-serif;
  --ff-num:'DM Sans','Noto Sans TC',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

body{
  font-family:var(--ff-body);
  color:var(--ink);
  background-color:var(--paper);
  /* subtle paper grain */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--ff-disp);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--coral-d);
  font-size:15px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.eyebrow::before,.eyebrow.both::after{
  content:'';width:22px;height:2px;background:currentColor;opacity:.55;border-radius:2px;
}
h1,h2,h3,h4{font-family:var(--ff-head);font-weight:700;line-height:1.18;color:var(--ink);}
.disp{font-family:var(--ff-disp);letter-spacing:.02em;line-height:.92;}
.num{font-family:var(--ff-num);font-feature-settings:"tnum";}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ff-body);font-weight:600;font-size:15px;
  padding:13px 22px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .18s,background .18s,border-color .18s;
  white-space:nowrap;line-height:1;
}
.btn:active{transform:translateY(1px);}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 6px 16px -8px var(--coral-d);}
.btn-coral:hover{background:var(--coral-d);}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 6px 16px -8px var(--teal-d);}
.btn-teal:hover{background:var(--teal-d);}
.btn-brown{background:var(--brown);color:#fff;}
.btn-brown:hover{background:var(--brown-d);}
.btn-ghost{background:transparent;color:var(--brown-d);border-color:var(--line);}
.btn-ghost:hover{background:#fff;border-color:var(--brown);}
.btn-line{background:#06C755;color:#fff;}
.btn-line:hover{background:#05b349;}
.btn-block{width:100%;}
.btn-lg{padding:16px 26px;font-size:16px;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* ---------- badges / tags ---------- */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;padding:3px 11px;border-radius:999px;
  font-family:var(--ff-body);letter-spacing:.02em;line-height:1.5;white-space:nowrap;
}
.tag-exp{background:var(--teal-soft);color:var(--teal-d);}
.tag-pro{background:var(--coral-soft);color:var(--coral-d);}
.tag-kid{background:#f6eccf;color:var(--sand-d);}
.tag-pkg{background:#ece3d2;color:var(--brown-d);}
.tag-flag{background:var(--sun);color:#fff;}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:6px;}
.field>label{font-size:13px;font-weight:600;color:var(--ink-soft);letter-spacing:.01em;}
.field>label .req{color:var(--coral-d);}
input,select,textarea{
  font-family:var(--ff-body);font-size:15px;color:var(--ink);
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:12px 13px;transition:border-color .15s,box-shadow .15s;width:100%;
}
input::placeholder,textarea::placeholder{color:#b3a88f;}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(63,139,133,.15);
}
textarea{resize:vertical;min-height:84px;line-height:1.6;}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238c7c64' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;}

/* ---------- card ---------- */
.card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);}

/* ---------- section marker ---------- */
.sec-head{display:flex;align-items:center;gap:14px;margin:0 0 16px;}
.sec-head .n{
  font-family:var(--ff-disp);font-size:34px;color:var(--sand);line-height:.8;
  -webkit-text-stroke:0;opacity:.9;
}
.sec-head h2{font-size:clamp(22px,4vw,28px);}
.sec-head .line{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px);}

/* ---------- toast ---------- */
#toast{
  display:none;position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--paper-hi);padding:12px 22px;border-radius:999px;
  font-size:14px;font-weight:600;z-index:9999;white-space:nowrap;box-shadow:var(--shadow);
}

/* ---------- wave divider (teal) ---------- */
.wave{display:block;width:100%;height:40px;line-height:0;}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;}}

/* scrollbar */
::-webkit-scrollbar{height:10px;width:10px;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;}