/* Original issue-local layout, not ZCONY master brand styling. Preview only. */
:root{color-scheme:light;--paper:#ffffff;--ink:#172632;--mute:#5d6a74;--rule:#dde3e7;--accent:#9b4e36;--frame:#eaf0f4;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans Thai","Tahoma","Arial",sans-serif;font-size:18px;line-height:1.82;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-underline-offset:3px}a:hover{color:var(--accent)}a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.skip{position:absolute;top:-200px;left:12px;padding:10px;background:white;z-index:10}.skip:focus{top:12px}
.mast{max-width:1400px;padding:21px clamp(18px,5vw,70px);margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule)}.mast .sign{font-weight:850;font-size:16px;letter-spacing:.11em;text-decoration:none}.mast .sub{font-size:11px;color:var(--mute);letter-spacing:.1em;text-transform:uppercase}.mast .lang{display:flex;gap:12px;align-items:center;font-size:13px;font-weight:650}.lang a{text-decoration:none;border-bottom:1px solid transparent}.lang a[aria-current=page]{border-color:var(--accent);color:var(--accent)}
.hero{max-width:1400px;margin:auto;padding:clamp(30px,5vw,75px) clamp(18px,5vw,70px) 0}.hero .micro{font-size:12px;font-weight:690;letter-spacing:.11em;color:var(--accent);text-transform:uppercase}.hero h1{max-width:1190px;font-size:clamp(36px,5.3vw,79px);line-height:1.27;letter-spacing:-.035em;font-weight:760;margin:22px 0 20px;overflow-wrap:break-word}.hero .dek{font-size:clamp(18px,1.6vw,25px);line-height:1.7;max-width:850px;color:#405360;margin:0 0 35px}.figure{margin:0}.figure img{display:block;width:100%;height:100%;object-fit:cover;background:var(--frame)}.figure.hero-media img{aspect-ratio:16/9;object-position:50% 55%}.figure figcaption{color:var(--mute);font-size:11px;line-height:1.6;margin:9px 0 0}
.split{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:minmax(150px,280px) minmax(0,820px);gap:clamp(22px,7vw,110px);padding:clamp(35px,6vw,90px) clamp(18px,5vw,70px) 100px}.side{font-size:12px;line-height:1.75}.side .sticky{position:sticky;top:30px}.side b{display:block;color:var(--accent);letter-spacing:.08em;margin-bottom:25px;font-size:12px}.side nav a{display:block;color:#5d6a74;text-decoration:none;margin-bottom:18px;border-left:2px solid var(--rule);padding-left:14px}.side nav a:hover{border-color:var(--accent);color:var(--ink)}.story{min-width:0}.story p{margin:0 0 1.38em}.story p:first-child{font-size:clamp(20px,2.1vw,26px);font-weight:440;line-height:1.72;margin-bottom:2em}.story h2{font-size:clamp(25px,3.1vw,38px);font-weight:735;line-height:1.38;letter-spacing:-.02em;margin:2.25em 0 .9em;border-top:1px solid var(--rule);padding-top:.75em;scroll-margin-top:50px}.story h3{font-size:21px;font-weight:700;margin:2.3em 0 .8em;line-height:1.5}.story strong{font-weight:735}.story ul{padding-left:1.2em}.story li{margin-bottom:9px}.story blockquote{font-style:normal;margin:45px 0;border-left:4px solid var(--accent);padding:8px 0 8px 25px;font-size:24px;line-height:1.55}.story blockquote p{font-size:inherit!important}.insert{max-width:820px;margin:45px 0 65px}.insert img{max-height:620px;object-fit:cover;aspect-ratio:3/2}.insert.suede img{aspect-ratio:4/5;max-height:730px;object-position:50% 45%}.pull{font-size:clamp(29px,3vw,42px);line-height:1.34;font-weight:690;letter-spacing:-.02em;color:var(--accent);border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);padding:38px 0;margin:60px 0}.footnotes{max-width:820px;margin-top:55px;border-top:1px solid var(--rule);padding-top:20px;color:#52616c;font-size:13px;line-height:1.8}.endbar{border-top:1px solid var(--rule);padding:24px clamp(18px,5vw,70px);display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;font-size:12px;color:var(--mute);max-width:1400px;margin:auto}.endbar a{color:var(--ink)}
@media(max-width:850px){.split{grid-template-columns:1fr;gap:0}.side{display:none}.hero h1{font-size:clamp(34px,7.4vw,60px)}.story{max-width:800px}.insert{margin:36px 0 48px}}
@media(max-width:540px){body{font-size:17px;line-height:1.84}.mast{padding:17px}.mast .sub{display:none}.hero{padding:34px 17px 0}.hero h1{font-size:clamp(32px,9vw,46px);letter-spacing:-.02em;line-height:1.32;margin-top:12px}.hero .dek{font-size:18px;margin-bottom:24px}.figure.hero-media img{aspect-ratio:4/5;object-position:52% 50%}.split{padding:28px 17px 80px}.story h2{font-size:26px;line-height:1.46;margin-top:2.2em}.story p:first-child{font-size:19px}.insert img{aspect-ratio:4/5}.pull{font-size:27px;padding:26px 0;margin:40px 0}.endbar{padding:25px 17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* NOKKLEEB: preview issue-only; no existing production CSS changed. */
.mast .sign a{text-decoration:none}.disclosure{font-size:12px;line-height:1.65;color:#596773;border-left:2px solid var(--accent);padding-left:13px;max-width:850px;margin:0 0 24px}.mast .sign{white-space:nowrap}@media(max-width:540px){.disclosure{font-size:13px;line-height:1.65}.hero h1{overflow-wrap:anywhere}}


/* NOKKLEEB LEATHER — TYPE READABILITY ONLY, 19 OCT 2026
   APPEND to the CSS in the CURRENT DEPLOYED PREVIEW (not Production R02).
   Scope: Thai Leather page only. Keep all photos/layout/other pages intact.
   Requires an actual locally hosted font at the specified path before deployment. */
@font-face {
  font-family: "NOK Thai Reading";
  src: url("./assets/fonts/noto-sans-thai-vf.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
html[lang="th"] body {
  font-family: "NOK Thai Reading", "Noto Sans Thai", Tahoma, sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.82;
  -webkit-font-smoothing: auto;
  letter-spacing: 0;
}
html[lang="th"] .hero h1 {
  font-family: inherit;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: break-word;
}
html[lang="th"] .hero .dek {
  font-weight: 550;
  line-height: 1.65;
  color: #243746;
  letter-spacing: 0;
}
html[lang="th"] .story p {
  font-size: 1em;
  font-weight: 500;
  line-height: 1.82;
  letter-spacing: 0;
  word-break: normal;
}
html[lang="th"] .story p:first-child {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.75;
  margin-bottom: 1.65em;
}
html[lang="th"] .story h2 {
  font-weight: 750;
  line-height: 1.46;
  letter-spacing: 0;
  word-break: normal;
}
html[lang="th"] .story h3,
html[lang="th"] .story strong { font-weight: 750; letter-spacing: 0; }
html[lang="th"] .pull { font-weight: 750; letter-spacing: 0; line-height: 1.42; }
html[lang="th"] .side { font-size: 14px; font-weight: 500; line-height: 1.7; }
html[lang="th"] .side b { font-size: 14px; font-weight: 750; }
html[lang="th"] .side nav a { color: #344654; }
html[lang="th"] .hero .micro,
html[lang="th"] .disclosure,
html[lang="th"] .figure figcaption,
html[lang="th"] .footnotes,
html[lang="th"] .endbar { font-weight: 500; letter-spacing: 0; }
html[lang="th"] .disclosure,
html[lang="th"] .footnotes { font-size: 14px; line-height: 1.8; color: #3e4e59; }
html[lang="th"] .figure figcaption,
html[lang="th"] .endbar { font-size: 12px; color: #3e4e59; }
@media (max-width: 540px) {
  html[lang="th"] body { font-size: 18px; line-height: 1.82; }
  html[lang="th"] .hero h1 { font-size: clamp(34px, 8.7vw, 44px); line-height: 1.35; }
  html[lang="th"] .hero .dek { font-size: 18px; }
  html[lang="th"] .story p:first-child { font-size: 19px; line-height: 1.78; }
  html[lang="th"] .story h2 { font-size: 27px; line-height: 1.48; }
  html[lang="th"] .hero .micro { font-size: 13px; }
}



/* NOKKLEEB Leather Preview — Image Credit Overlay ONLY (19 Oct 2026)
   Apply AFTER the current LIVE preview CSS, including TH font v02.
   Do not apply to main NOKKLEEB R02. Keep all attribution and CC BY links. */
.figure {
  position: relative;
}
html[lang="th"] .figure figcaption,
html[lang="en"] .figure figcaption {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 10px;
  display: block;
  width: max-content;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 5px 8px;
  border-radius: 2px;
  background: rgba(12, 20, 27, .82);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  overflow-wrap: break-word;
  white-space: normal;
  box-shadow: none;
}
html[lang="th"] .figure figcaption a,
html[lang="en"] .figure figcaption a,
html[lang="th"] .figure figcaption a:visited,
html[lang="en"] .figure figcaption a:visited {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
html[lang="th"] .figure figcaption a:focus-visible,
html[lang="en"] .figure figcaption a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (max-width: 540px) {
  html[lang="th"] .figure figcaption,
  html[lang="en"] .figure figcaption {
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 4px 7px;
    font-size: 10px;
    line-height: 1.4;
  }
}
@media (forced-colors: active) {
  html[lang="th"] .figure figcaption,
  html[lang="en"] .figure figcaption {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
  }
  html[lang="th"] .figure figcaption a,
  html[lang="en"] .figure figcaption a { color: LinkText; }
}

/* Minimal image credits — approved follow-up */
html[lang="th"] .figure figcaption,
html[lang="en"] .figure figcaption {
  left: 7px;
  bottom: 7px;
  max-width: calc(100% - 14px);
  padding: 2px 4px;
  border-radius: 0;
  background: rgba(12, 20, 27, .16);
  color: rgba(255, 255, 255, .92);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}
@media (max-width: 540px) {
  html[lang="th"] .figure figcaption,
  html[lang="en"] .figure figcaption {
    left: 6px;
    bottom: 6px;
    max-width: calc(100% - 12px);
    padding: 2px 3px;
    font-size: 9px;
  }
}