*{box-sizing:border-box;}
:root{--kyyeu-accent:#8C4A2E; --kyyeu-heading-font:'Patrick Hand','Caveat',cursive; --kyyeu-heading-scale:1;}

  body{margin:0; background:var(--kyyeu-bg,linear-gradient(#F7EDE2,#F3D9C4)); color:#3A2A2E; font-family:'Literata',serif; line-height:1.7;}
  .wrap{max-width:720px; margin:0 auto;}

  .cover{padding:56px 24px 30px; text-align:center;}
  .eyebrow{font-size:12px; letter-spacing:.2em; color:#A85A3A; margin-bottom:14px;}
  .cover-photo{width:190px; height:190px; border-radius:50%; margin:0 auto 20px; border:5px solid #fff; box-shadow:0 16px 34px rgba(107,76,107,.25);}
  .cover-photo img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
  .cover h1{font-family:var(--kyyeu-heading-font); font-weight:700; font-size:calc(50px * var(--kyyeu-heading-scale)); margin:0 0 6px; color:var(--kyyeu-accent);}
  .cover p{margin:0; font-size:14px; color:#6B4C4E;}

  .section{padding:20px 24px 8px;}
  .section-head{text-align:center; margin-bottom:10px;}
  .section h2{font-family:var(--kyyeu-heading-font); font-weight:600; font-size:calc(32px * var(--kyyeu-heading-scale)); color:var(--kyyeu-accent); margin:0 0 4px;}
  .section .sub{font-size:13.5px; color:#7A5A5C;}

  /* PHỐI CẢNH CON ĐƯỜNG */
  .road-wrap{position:relative; max-width:560px; margin:20px auto 10px; padding:20px 0 40px;}
  .road-line{position:absolute; left:50%; top:0; bottom:0; width:3px; background:repeating-linear-gradient(#fff 0 14px, transparent 14px 28px); transform:translateX(-50%); opacity:.7;}
  .bike{position:absolute; left:50%; width:34px; height:34px; transform:translate(-50%,0); transition:top .1s linear; z-index:5; filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));}
  .stop{position:relative; display:flex; align-items:center; gap:16px; margin-bottom:46px;}
  .stop:nth-child(even){flex-direction:row-reverse; text-align:right;}
  .stop-photo{width:130px; height:130px; border-radius:50%; overflow:hidden; border:4px solid #fff; box-shadow:0 10px 22px rgba(107,76,107,.2); flex-shrink:0;}
  .stop-photo img{width:100%; height:100%; object-fit:cover;}
  .stop-text{font-family:'Patrick Hand','Caveat',cursive; font-size:19px; color:#5C3A3E; max-width:180px;}
  .stop:nth-child(1) .stop-photo{width:150px; height:150px;}
  .stop:nth-child(3) .stop-photo{width:110px; height:110px;}
  .stop:nth-child(4) .stop-photo{width:95px; height:95px;}

  .see-full{text-align:center; margin:10px 0 0;}
  .see-full a{font-family:'Patrick Hand','Caveat',cursive; font-size:21px; color:#8C4A2E; text-decoration:none; border-bottom:1px dashed #8C4A2E;}

  .tag-row{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:520px; margin:0 auto;}
  .tag{background:rgba(255,255,255,.7); backdrop-filter:blur(4px); border-radius:20px; padding:8px 16px; font-size:13.5px; color:#5C3A3E; box-shadow:0 4px 10px rgba(107,76,107,.1);}

  .notes{max-width:520px; margin:0 auto; display:grid; gap:14px;}
  .note{background:rgba(255,255,255,.6); backdrop-filter:blur(6px); border-radius:14px; padding:16px 20px;}
  .note p{margin:0 0 8px; font-size:14.5px;}
  .note cite{font-family:'Patrick Hand','Caveat',cursive; font-size:18px; color:#8C4A2E;}

  .share{margin:50px 24px 30px; padding:36px 24px; text-align:center; border-radius:20px; background:linear-gradient(135deg,#6B4C6B,#8C4A2E); color:#F7EDE2;}
  .share h2{font-family:'Patrick Hand','Caveat',cursive; font-size:30px; margin:0 0 6px;}
  .share p{font-size:13.5px; margin:0 0 18px; opacity:.85;}
  #qrcode{background:#fff; display:inline-block; padding:8px; border-radius:10px; margin-bottom:14px;}
  .link-row{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; font-size:13px;}
  .link-row code{background:rgba(255,255,255,.2); padding:6px 12px; border-radius:20px;}
  .link-row button{background:#F7EDE2; color:#6B4C6B; border:none; padding:6px 14px; border-radius:20px; font-size:12.5px; font-weight:700; cursor:pointer;}

  .foot{text-align:center; font-size:12px; color:#7A5A5C; padding:0 20px 40px;}


/* Theme 18 typography refinement — staging scoped */
@media (max-width:760px){
  .wrap{width:100%;max-width:100%;overflow:hidden}
  .cover{padding:28px 18px 22px}
  .eyebrow{font-size:10px;letter-spacing:.16em;margin-bottom:10px}
  .cover-photo{width:148px;height:148px;border-width:4px;margin-bottom:16px}
  .cover h1{font-size:clamp(34px,10.5vw,46px)!important;line-height:1.02;letter-spacing:.005em;max-width:100%;text-wrap:balance}
  .cover p{font-size:14px;line-height:1.55;max-width:34rem;margin-inline:auto}
  .section{padding:18px 18px 6px}
  .section-head{margin-bottom:8px}
  .section h2{font-size:clamp(26px,7.5vw,34px)!important;line-height:1.08}
  .section .sub{font-size:13px;line-height:1.55}
  .road-wrap{margin:14px auto 8px;padding:10px 0 28px}
  .stop{gap:10px;margin-bottom:30px}
  .stop-text{font-size:18px;line-height:1.12;max-width:calc(100% - 115px)}
  .stop-photo{width:100px!important;height:100px!important}
  .stop:nth-child(1) .stop-photo{width:112px!important;height:112px!important}
  .stop:nth-child(3) .stop-photo{width:92px!important;height:92px!important}
  .stop:nth-child(4) .stop-photo{width:82px!important;height:82px!important}
  .see-full a{font-size:19px}
  .tag-row{gap:8px}
  .tag{padding:7px 12px;font-size:12.5px}
  .notes{gap:12px}
  .note{padding:14px 16px}
  .note p{font-size:14px;line-height:1.6}
  .note cite{font-size:17px}
  .share{margin:34px 18px 22px;padding:26px 18px}
  .share h2{font-size:28px;line-height:1.1}
  .share p{font-size:13px;line-height:1.55}
  .link-row{font-size:12px}
  #kyyeuAudioToggle{font-size:13px!important;line-height:1.2;padding:10px 14px!important;bottom:14px!important;right:12px!important;max-width:calc(100vw - 24px);white-space:nowrap}
}
@media (max-width:390px){
  .cover{padding:24px 16px 20px}
  .cover-photo{width:132px;height:132px}
  .cover h1{font-size:clamp(31px,10vw,40px)!important}
  .cover p{font-size:13px}
  .section{padding-left:15px;padding-right:15px}
  .section h2{font-size:clamp(24px,7.6vw,30px)!important}
  .stop-text{font-size:16px}
  .note p{font-size:13.5px}
  .share{margin-left:15px;margin-right:15px}
}


/* Theme 18 weight balance — staging scoped */
.cover h1,.section h2,.share h2{font-family:"Source Serif 4",Georgia,"Times New Roman",serif!important;font-synthesis:none;text-rendering:optimizeLegibility;letter-spacing:0!important}
.cover h1{font-weight:600!important;line-height:1.12!important}
.section h2{font-weight:600!important;line-height:1.14!important}
.share h2{font-weight:600!important;line-height:1.14!important}
.stop-text,.see-full a,.note cite{font-family:Patrick Hand,Caveat,cursive;font-weight:500;letter-spacing:.01em;font-synthesis:none}
@media(max-width:760px){.cover h1{font-size:clamp(34px,10.5vw,46px)!important}.section h2{font-size:clamp(26px,7.5vw,34px)!important}.share h2{font-size:28px!important}}
@media(max-width:390px){.cover h1{font-size:clamp(31px,10vw,40px)!important}.section h2{font-size:clamp(24px,7.6vw,30px)!important}}