@import url("brand_tokens_v1_0.css");

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:var(--text);text-decoration-color:var(--accent);text-underline-offset:3px;}
a:hover{color:var(--accent);}
::selection{background:var(--accent-soft);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

.wrap{width:100%;max-width:560px;margin:0 auto;padding:0 22px;}
main{flex:1;display:flex;flex-direction:column;}

/* header */
.top{padding:28px 0 0;}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;}
.wm{display:inline-flex;flex-direction:column;text-decoration:none;color:var(--text);line-height:.84;}
.wm .d{font-weight:900;font-size:26px;letter-spacing:-0.01em;}
.wm .s{font-family:var(--font-mono);font-weight:500;font-size:8.5px;letter-spacing:0.42em;text-transform:uppercase;color:var(--accent);margin-top:6px;}
.wm.lg .d{font-size:52px;}
.wm.lg .s{font-size:12px;margin-top:10px;}
/* optical alignment: the D's ink starts 7.4% of its size in, the mono S only 3.9% */
.wm .s{padding-left:1.6px;}
.wm.lg .s{padding-left:3.4px;}
.back{font-family:var(--font-mono);font-size:12px;letter-spacing:0.04em;color:var(--text-muted);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;}
.back:hover{color:var(--text);}

/* home */
.home{justify-content:center;padding:56px 0 40px;}
/* one left edge: the ink of the D, STUDIO, the card border and the footer email all sit on the .wrap edge.
   The D's ink starts 3.8px into its box (at 52px), so the large wordmark moves left by that much. */
.home .wm.lg{margin-left:-3.8px;}
.home .items{margin-top:40px;gap:0;border-top:1px solid var(--border);}
/* home rows: no box, so the tool name shares the wordmark's left edge and the arrow meets the footer's right edge */
.home .item{background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;padding:22px 0;}
.home .item:hover{transform:none;border-color:var(--border);}
.home .item:hover .t{color:var(--accent);}
.items{display:grid;gap:12px;}
.item{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 20px;background:var(--panel);border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--text);box-shadow:var(--shadow);transition:border-color .15s,transform .15s;}
.item:hover{border-color:var(--accent);color:var(--text);transform:translateY(-1px);}
.item .k{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);}
.item .t{font-weight:800;font-size:21px;line-height:1.2;letter-spacing:-0.01em;}
.item .st{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-top:6px;}
.item .ar{font-size:22px;color:var(--accent);flex:none;}

/* product */
.prod{padding:40px 0 48px;}
.prod .by{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);}
.prod h1{font-weight:900;font-size:clamp(34px,9vw,46px);line-height:1.02;letter-spacing:-0.025em;margin:8px 0 14px;}
.prod .lead{font-size:18px;line-height:1.45;color:var(--text-muted);max-width:32ch;text-wrap:pretty;}
.sketch{margin:30px -6px 22px;background:#F8F4EA;border:1px solid var(--border);border-radius:8px;padding:14px 10px 6px;}
.sketch img{display:block;width:100%;height:auto;}
.labels{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-bottom:30px;}
.labels li{font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--border);border-radius:100px;color:var(--text);}
.prod .sub{font-size:16px;line-height:1.5;color:var(--text-muted);max-width:40ch;margin-top:10px;text-wrap:pretty;}
.overview{list-style:none;margin:0 0 30px;border-top:1px solid var(--border);}
.overview li{display:grid;grid-template-columns:6.5rem 1fr;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--border);font-size:16px;line-height:1.4;}
.overview .k{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);}
.actions{display:grid;gap:10px;}
.actions.access{margin-top:30px;}

/* buttons */
.btn{display:flex;justify-content:center;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:6px;font-family:var(--font-sans);font-weight:700;font-size:17px;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background .15s,border-color .15s,color .15s;}
.btn-primary{background:#F5B800;color:#000;}
.btn-primary:hover{background:#FFC91A;color:#000;}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--text);}
.btn-ghost:hover{background:var(--text);color:var(--bg);}
.btn[disabled]{cursor:progress;}

/* 404 */
.nf{justify-content:center;padding:56px 0;}
.nf p{font-size:18px;color:var(--text-muted);margin:22px 0 26px;}

/* footer */
.foot{padding:28px 0 32px;border-top:1px solid var(--border);margin-top:auto;}
.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);}
.foot a{color:var(--text-muted);}
.foot .wrap > a:first-child{margin-left:-0.05em;} /* the mono m's side bearing, so the email's ink sits on the edge */
.foot .wrap > *{white-space:nowrap;}

@media (min-width:720px){
  body{font-size:17px;}
  .top{padding-top:40px;}
  .actions{grid-template-columns:1fr 1fr;}
  .sketch{margin-left:0;margin-right:0;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}