/* DevMeen portfolio. Calm & Cheeky look: grey, black and white, lavender for links and selected items, coral reserved. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit}

:root{
  --page:#F6F7F8; --card:#fff; --ink:#0E1318; --ink-2:#5B6470; --line:#E5E7EB; --card-edge:transparent;
  --a3:#efeefe; --a4:#e7e4ff; --a9:#927fe7; --a11:#59469d;
  --b3:#feebe7; --b9:#e7624b; --b11:#9b2917;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 3px 8px rgba(16,24,40,.05),0 8px 20px rgba(16,24,40,.05);
  --r-card:20px; --r-field:14px; --r-btn:999px;
  --h:36px; --touch:44px;
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px;
  --pad:32px; --gap:16px; --pad-card:16px;
  --t-title:28px; --t-lead:20px; --t-body:16px; --t-btn:15px; --t-small:14px; --t-tiny:12px;
  --stroke:1.5;
  --font:"Anuphan","Leelawadee UI","Noto Sans Thai",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --page:#0d0c13; --card:#23222a; --ink:#F5F6F7; --ink-2:#aaa9b4; --line:#302f39; --card-edge:rgba(255,255,255,.10);
    --a3:#242038; --a4:#2e284a; --a9:#b6aaff; --a11:#c9c2ff;
    --b3:#391a14; --b9:#fe8169; --b11:#feb6a7;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 3px 8px rgba(0,0,0,.34);
  }
}

body{background:var(--page);color:var(--ink);font-family:var(--font);
  font-size:var(--t-body);line-height:1.55;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--a9);outline-offset:2px}

/* top bar: brand and category links; a menu button replaces the links on phone */
.top{position:sticky;top:0;z-index:10;background:var(--page);border-bottom:1px solid var(--line)}
.topin{max-width:1080px;margin:0 auto;padding:var(--s-3) var(--pad);min-height:calc(var(--touch) + 2*var(--s-3));
  display:flex;align-items:center;gap:var(--s-4)}
.brand{display:inline-flex;align-items:center;min-height:var(--touch);padding:0 var(--s-1);
  font-size:var(--t-lead);font-weight:700;text-decoration:none}
.toplinks{display:flex;gap:var(--s-1);flex-wrap:wrap}
.toplink{display:inline-flex;align-items:center;min-height:var(--touch);padding:0 var(--s-3);
  border-radius:var(--r-btn);font-size:var(--t-small);color:var(--ink-2);text-decoration:none}
.toplink:hover{background:var(--line)}
.toplink[aria-current="page"]{background:var(--a3);color:var(--a11);font-weight:600}
.menubtn{display:none}
.phonemenu{display:none}

/* page body */
.body{width:100%;max-width:1080px;margin:0 auto;padding:var(--s-5) var(--pad);
  display:flex;flex-direction:column;gap:var(--s-5)}
.col{display:flex;flex-direction:column;gap:var(--s-2)}
.gapl{gap:var(--s-3)}
.row{display:flex;gap:var(--s-2);align-items:center}
.wrap{flex-wrap:wrap}
.hero{gap:var(--s-3);padding:var(--s-4) 0}
.display{font-size:calc(var(--t-title) * 2);font-weight:700;line-height:1.1}
.lead{font-size:var(--t-lead);color:var(--ink-2);max-width:40ch}
.lead2{color:var(--ink-2);max-width:68ch}
.h1{font-size:var(--t-title);font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.h2{font-size:var(--t-lead);font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.dim{color:var(--ink-2);font-size:var(--t-small);overflow-wrap:anywhere}
.dimmer{color:var(--ink-2);font-size:var(--t-tiny)}
.tnum{font-variant-numeric:tabular-nums}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.box{background:var(--card);border:1px solid var(--card-edge);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:var(--pad-card)}
.badge{display:inline-block;padding:1px 10px;border-radius:var(--r-btn);font-size:var(--t-small);
  font-weight:500;white-space:nowrap;background:var(--line);color:var(--ink-2)}
.badge.on{background:var(--a3);color:var(--a11)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--h);padding:0 var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-btn);background:var(--card);
  font-size:var(--t-btn);font-weight:600;text-decoration:none;text-align:center;cursor:pointer}
.btn:hover{background:var(--line)}
.btn.primary{background:var(--ink);color:var(--card);border-color:var(--ink)}
.btn.primary:hover{opacity:.88}
.btn.ghost{background:none;border-color:transparent}
.btn.small{font-size:var(--t-small);font-weight:500}
.backlink{align-self:flex-start;margin-left:calc(-1 * var(--s-3))}
.link{color:var(--a11);text-decoration:underline;text-underline-offset:2px}

/* category card with a miniature sketch */
.cat{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;text-decoration:none;
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--r-card);box-shadow:var(--shadow)}
.cat .sketch{background:var(--page);color:var(--ink-2);padding:var(--s-4) var(--s-3);display:grid;place-items:center;
  border-bottom:1px solid var(--line)}
.cat .sketch svg{width:100%;max-width:200px;height:auto}
.cat:hover .sketch{color:var(--a11)}
.catin{padding:var(--pad-card);display:flex;flex-direction:column;gap:var(--s-1)}
.ttl{font-weight:600;overflow-wrap:anywhere}
.count{font-size:var(--t-small);color:var(--a11);font-weight:600;margin-top:var(--s-1)}

/* work card */
.work{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;text-decoration:none;
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--r-card);box-shadow:var(--shadow)}
.workin{padding:var(--pad-card);display:flex;flex-direction:column;gap:var(--s-1)}
.work .ph{border:0;border-bottom:1px solid var(--line);border-radius:0}

/* image box: dashed and empty until its screenshot file exists */
.ph{aspect-ratio:16/10;width:100%;overflow:hidden;background:var(--page);border:1px dashed var(--line);border-radius:var(--r-field)}
.ph.phone{aspect-ratio:390/844;max-width:320px;margin-inline:auto}
.ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* cards keep one frame: a phone screenshot shows its top part in the same 16:10 box as desktop ones */
.work .ph.phone{aspect-ratio:16/10;max-width:none;margin-inline:0}

/* case study */
.read{max-width:72ch;width:100%}
.read p{max-width:68ch}
.stackbadges{display:flex;flex-wrap:wrap;gap:var(--s-2)}

/* steps: numbered circles, no arrows */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.steps li{display:flex;gap:var(--s-3);align-items:flex-start}
.steps .num{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--card);font-weight:700;font-size:var(--t-small)}
.stepcol{gap:0}
.gets{padding-left:1.2em;display:flex;flex-direction:column;gap:var(--s-1);list-style:disc}

/* phone: one column, menu button in place of the category links */
@media (max-width:719px){
  .topin{padding:var(--s-2) var(--pad);gap:var(--s-1)}
  .toplinks{display:none}
  .menubtn{display:inline-grid;place-items:center;width:var(--touch);height:var(--touch);margin-left:auto;
    border:0;background:none;border-radius:var(--r-btn);font-size:var(--t-lead);cursor:pointer}
  .phonemenu.open{display:flex;flex-direction:column;padding:0 var(--pad) var(--s-3)}
  .phonemenu .toplink{font-size:var(--t-body)}
  .body{padding:var(--s-4) var(--pad);gap:var(--s-4)}
  .grid3{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .display{font-size:calc(var(--t-title) * 1.7)}
  .btn{white-space:normal;padding-block:var(--s-2)}
}