.desk{padding:36px 0 64px}
.desk h1{font-size:clamp(26px,3.6vw,40px);margin:8px 0 10px;letter-spacing:.06em}
.lead{color:var(--ink-2);max-width:640px;margin-bottom:28px}
.studio{
  display:grid;grid-template-columns:1fr 280px 1fr;grid-template-rows:auto auto;gap:16px 20px;
  align-items:center;
}
.inkstone{
  grid-column:2;grid-row:1 / span 2;
  width:280px;height:340px;margin:0 auto;
  border-radius:46% 46% 42% 42%;
  border:2px solid var(--ink);
  background:radial-gradient(ellipse at 50% 38%,#3a342e 0%,#1c1916 55%,#0e0c0b 100%);
  color:var(--paper);padding:28px 22px 22px;text-align:center;
  display:flex;flex-direction:column;justify-content:space-between;
}
.inkstone h2{font-size:16px;letter-spacing:.2em}
.pool{
  width:78%;height:120px;margin:12px auto 0;border-radius:50%;
  overflow:hidden;border:1px solid #5a5348;
}
.pool img{width:100%;height:100%;object-fit:cover;opacity:.55}
.inkstone p{font-size:12px;letter-spacing:.08em;color:#c8c0b4}
.stick{
  scroll-margin-top:72px;
  min-height:118px;padding:16px 18px;
  background:linear-gradient(180deg,#2a241c 0%,#1c1916 40%,#2a241c 100%);
  color:var(--paper);border:1px solid #3a342e;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  position:relative;
}
.stick:before,.stick:after{
  content:"";position:absolute;left:10px;right:10px;height:3px;background:var(--gold);
}
.stick:before{top:8px}
.stick:after{bottom:8px}
.stick h2{font-size:18px;letter-spacing:.12em}
.stick p{font-size:12px;color:#c8c0b4}
.stick .btn{border-color:var(--paper);color:var(--paper);min-height:34px;margin-top:6px;align-self:flex-start}
.stick .btn-fill{background:var(--paper);color:var(--ink)}
#win{grid-column:1;grid-row:1}
#mac{grid-column:3;grid-row:1}
#app{grid-column:1;grid-row:2}
#web{grid-column:3;grid-row:2}
.seal-scrm{
  grid-column:1 / -1;justify-self:center;margin-top:8px;
  width:96px;height:96px;border:3px solid var(--cinnabar);color:var(--cinnabar);
  display:grid;place-items:center;text-align:center;font-size:13px;font-weight:800;letter-spacing:.08em;
}

.grind{padding:8px 0 56px}
.grind-grid{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start}
.steps{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--ink);padding-left:18px}
.step{position:relative;padding:0 0 28px}
.step:before{
  content:"";position:absolute;left:-25px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--ink);
}
.step h3{font-size:15px;margin-bottom:4px}
.step p{font-size:13px;color:var(--ink-2)}
.ruled{
  border:1px solid var(--ink);
  background:repeating-linear-gradient(var(--paper) 0 31px,rgba(163,38,38,.16) 31px 32px);
  padding:8px 0 0;
}
.ruled table{width:100%;border-collapse:collapse;font-size:14px}
.ruled th,.ruled td{padding:8px 14px;text-align:left;border:0;height:32px;vertical-align:middle}
.ruled th{font-weight:800;letter-spacing:.08em}

.note{padding:0 0 56px}
.note-card{border:1px solid var(--ink);padding:22px 24px;max-width:720px}
.note-card h2{font-size:18px;margin-bottom:8px}
.note-card p{color:var(--ink-2);font-size:14px}

@media(max-width:900px){
  .studio{grid-template-columns:1fr}
  #win,#mac,#app,#web,.inkstone{grid-column:auto;grid-row:auto;width:100%}
  .inkstone{height:auto;border-radius:24px}
  .grind-grid{grid-template-columns:1fr}
}