/* Learning Lab JP — link hub (link-in-bio). Learning Lab design system:
   coral/butter/black, Noto Sans Thai, 2px black borders, offset-stamp shadow. */

@font-face{font-family:'Noto Sans Thai';font-weight:400;font-display:swap;src:url('fonts/NotoSansThai-Regular.ttf') format('truetype')}
@font-face{font-family:'Noto Sans Thai';font-weight:600;font-display:swap;src:url('fonts/NotoSansThai-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Noto Sans Thai';font-weight:700;font-display:swap;src:url('fonts/NotoSansThai-Bold.ttf') format('truetype')}
@font-face{font-family:'Noto Sans Thai';font-weight:800;font-display:swap;src:url('fonts/NotoSansThai-ExtraBold.ttf') format('truetype')}
@font-face{font-family:'Noto Sans Thai';font-weight:900;font-display:swap;src:url('fonts/NotoSansThai-Black.ttf') format('truetype')}

:root{
  --white:#fff;--black:#000;--coral:#ff5757;--butter:#fbeb78;
  --ink-50:#f7f7f7;--ink-100:#ededed;--ink-400:#8a8a8a;--ink-600:#3a3a3a;
  --font:'Noto Sans Thai','Noto Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--black);background:var(--white);
  min-height:100vh;background:var(--white);-webkit-font-smoothing:antialiased}
svg{display:block}

/* top brand strip */
.topstrip{height:8px;background:var(--coral);border-bottom:2px solid var(--black)}

.hub{max-width:480px;margin:0 auto;padding:44px 20px 56px}

/* brand head */
.brandhead{text-align:center;margin-bottom:34px}
.brandhead .logo{display:block;width:200px;max-width:66%;height:auto;margin:0 auto 10px}
.brandhead .mark{width:76px;height:76px;margin:0 auto 16px;background:var(--black);color:var(--white);
  display:grid;place-items:center;font-weight:900;font-size:30px;letter-spacing:.02em;
  border:2px solid var(--black);box-shadow:6px 6px 0 0 var(--coral)}
.brandhead h1{font-size:26px;font-weight:900;letter-spacing:-.01em;margin:0}
.brandhead .tag{font-size:14px;font-weight:600;color:var(--ink-600);margin-top:6px}

/* link buttons */
.links{display:grid;gap:15px}
.lnk{display:flex;align-items:center;gap:14px;width:100%;text-decoration:none;color:var(--black);
  background:var(--white);border:2px solid var(--black);padding:15px 16px;box-shadow:5px 5px 0 0 var(--black);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.lnk:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 0 var(--black)}
.lnk:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--black)}
.lnk .ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border:2px solid var(--black);background:var(--white)}
.lnk .txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.lnk .txt b{font-size:17px;font-weight:800}
.lnk .txt small{font-size:12px;font-weight:600;color:var(--ink-400);letter-spacing:.02em;margin-top:2px}
.lnk .arrow{margin-left:auto;font-weight:900;font-size:20px;flex:none}

.lnk .free{margin-left:auto;background:var(--butter);color:var(--black);border:2px solid var(--black);font-weight:900;font-size:12px;line-height:1;letter-spacing:.06em;padding:5px 9px}
.lnk .free + .arrow{margin-left:12px}

/* accent variants for the two products */
.lnk.coral{background:var(--coral);color:var(--white);box-shadow:5px 5px 0 0 var(--black)}
.lnk.coral .txt small{color:rgba(255,255,255,.85)}
.lnk.coral .ic{background:var(--white);color:var(--coral)}
.lnk.butter{background:var(--butter);color:var(--black)}
.lnk.butter .txt small{color:var(--ink-600)}

.lnk.dark{background:var(--black);color:var(--white);box-shadow:5px 5px 0 0 var(--coral)}
.lnk.dark:hover{box-shadow:6px 6px 0 0 var(--coral)}
.lnk.dark:active{box-shadow:2px 2px 0 0 var(--coral)}
.lnk.dark .txt small{color:rgba(255,255,255,.72)}
.lnk.dark .ic{background:var(--white);color:var(--black)}

/* section label between products and socials */
.divlabel{display:flex;align-items:center;gap:12px;margin:26px 2px 4px;color:var(--ink-400);
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.divlabel::before,.divlabel::after{content:"";height:2px;background:var(--ink-100);flex:1}

footer.hubfoot{text-align:center;color:var(--ink-400);font-size:12px;margin-top:32px}

@media(max-width:420px){
  .hub{padding:34px 16px 44px}
  .lnk .txt b{font-size:16px}
}