/* somewritingapp.com — 按 Sketch 文件 Somewritingapp 落地。
   画板 2560×1440，字号按 vw 换算，比例在任何宽度都跟稿子一致。

   正文与标题的衬线取自 app 内部那六款：
   London  = Charter            随 macOS 自带，走 tagline / 胶囊 / 各页 h1
   New York= Libre Caslon Text  app 里 bundle 的 ttf，转 woff2 自托管，走正文
   非 Mac 访客拿不到 Charter，就落到 Libre Caslon —— 它一定加载得到。

   wordmark 与页脚是无衬线：SF Pro，稿子里写的就是它。
   零第三方请求。 */

@font-face {
  font-family: "Libre Caslon Text";
  src: url("fonts/libre-caslon-text.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("fonts/libre-caslon-text-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --ground:   #ffffff;
  --ink:      #202020;  /* 标题与正文 */
  --slate:    #4d5762;  /* wordmark、页脚链接 */
  --pill-bg:  #c3c9c0;  /* 两颗胶囊同一个底：首页那颗和 coming to mac soon */
  --pill-ink: #3f3842;
  --on-photo: #ffffff;

  /* 整份稿子只有这一个字距 */
  --track: .177em;

  /* London：稿子里标题用的就是它，Mac 上原生有 */
  --serif: Charter, "Libre Caslon Text", Georgia, serif;
  /* New York：自托管，所有人都拿得到，正文用它 */
  --body:  "Libre Caslon Text", Charter, Georgia, serif;
  /* wordmark 与页脚：稿子里这两处就是 SF Pro，和 asswitch 首页同一个字面 */
  --sans:  "SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont,
           system-ui, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  letter-spacing: var(--track);
}

a { color: inherit; }

/* 稿子里字距吃在右边，最后一个字会被推出去。整体左移半格补回来。 */
.tracked { margin-right: calc(var(--track) * -1); }

/* ---------- 页脚：两张稿子完全一致 ---------- */

.foot {
  position: absolute;
  left: 0; right: 0;
  bottom: 3.47%;                      /* y 1390 / 1440 */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 1.37%;                   /* x 35 / 2560 */
  font-family: var(--sans);
  font-size: clamp(10px, .586vw, 15px);         /* 稿子产品页 15 / 2560 */
  color: var(--slate);
}
.home .foot { font-size: clamp(10px, .664vw, 17px); }   /* 稿子 20，按要求略收 */
.foot nav { display: flex; gap: clamp(1rem, 1.33vw, 2.1rem); }
.foot a { text-decoration: none; opacity: .82; transition: opacity .3s ease; }
.foot a:hover, .foot a:focus-visible { opacity: 1; }
.foot .mark { font-weight: 600; letter-spacing: var(--track); }
.reset { font-family: var(--sans); }

/* ================= 首页 ================= */

.home {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ground) url("images/erode.jpg") center / cover no-repeat;
  overflow: hidden;
}

/* 字面与虚焦都照 asswitch 首页的 wordmark：SF Pro 的加宽轴拉到
   wdth 125（Expanded），semibold，再压半像素的虚。首页和产品页顶部都是它，
   但产品页那颗按稿子只有首页的 20/33。 */
.wordmark {
  position: absolute;
  top: 3.19%;                         /* y 46 / 1440 */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: clamp(13px, 1.289vw, 33px);
  font-weight: 600;
  font-stretch: expanded;
  font-variation-settings: "wdth" 125;
  letter-spacing: var(--track);
  color: var(--slate);
  filter: blur(.5px);
  pointer-events: none;
}
.home .wordmark { letter-spacing: .147em; }     /* 稿子 4.85 / 33 */
.product .wordmark, .doc .wordmark {
  font-size: clamp(11px, .781vw, 20px);         /* 稿子 20 / 2560 */
  filter: blur(.3px);                           /* 字小了，虚也得跟着收 */
  pointer-events: auto;                         /* 这两页它是回首页的路 */
  text-decoration: none;
}

/* 产品名，压在石头正上方。位置照稿子的百分比，之后归访客支配。 */
.pill {
  position: absolute;
  left: 50.02%;                       /* x 1175 + 105.5 / 2560 */
  top: 23.26%;                        /* y 305 + 30 / 1440 */
  transform: translate(-50%, -50%);
  padding: .55em 1.35em;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-ink);
  font-family: var(--body);
  font-size: clamp(10px, .781vw, 20px);
  font-weight: 700;
  letter-spacing: .04em;              /* 稿子 kerning .8 / 20 */
  text-decoration: none;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: background .35s ease;
}
.pill:hover, .pill:focus-visible { background: #b4bcb0; }
.pill.dragging { cursor: all-scroll; background: #b4bcb0; }

/* 拖过之后总得有条路回去。 */
.reset {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  letter-spacing: var(--track);
  color: var(--slate);
  opacity: .5;
  cursor: pointer;
  transition: opacity .25s ease;
}
.reset:hover, .reset:focus-visible { opacity: 1; }
.reset[hidden] { display: none; }

.home .tagline {
  position: absolute;
  bottom: 11.67%;                     /* (1440 - 1212 - 60) / 1440 */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: clamp(15px, 1.406vw, 36px);
  font-weight: 700;
  letter-spacing: var(--track);
  color: var(--on-photo);
}

.home .foot { color: var(--slate); }

/* ================= 产品页 ================= */
/* 稿子：左栏 835 宽放文字（x 67），右栏 1488 宽放截图（x 1003），沟 101。
   标题是衬线，正文是 SF Pro——和首页的分工反过来，这是稿子画的。 */

.product {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;                   /* 一屏装下，不许滚——what's included 弹出来看 */
  padding: 6.52% 2.62% 8%;            /* y 167 / 2560——百分比 padding 按宽度算 */
}

.product .lead h1 {
  margin: 0;
  font-family: var(--body);            /* 稿子这页的衬线是 Libre Caslon，不是 Charter */
  font-size: clamp(30px, 2.305vw, 59px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink);
}

.product .sub {
  margin: .9rem 0 0;                  /* y 256 - 167 - 72 ≈ 17 */
  font-family: var(--sans);
  font-size: clamp(11px, .703vw, 18px);
  letter-spacing: var(--track);
  color: var(--ink);
}

/* 32.6% : 58.1%，中间 3.9% 沟——照稿子的 835 / 101 / 1488。 */
.cols {
  display: grid;
  grid-template-columns: 32.6fr 58.1fr;
  gap: 3.9%;
  margin-top: 1.37%;                  /* 截图顶 312 - 副题底 277 = 35 / 2560 */
  align-items: start;
}

.copy {
  font-family: var(--sans);
  font-size: clamp(14px, 1.094vw, 28px);
  font-weight: 400;
  line-height: 1.18;                  /* 稿子 8 行占 256px → 32/28。紧，但那是画的 */
  letter-spacing: 0;                  /* 稿子里正文没有字距，只有小字有 */
  color: var(--ink);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;       /* 六字以上才断，两头各留三个 */
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  padding-top: 1.45em;                /* 让正文首行落在截图顶边之下一点，照稿子 */
}
.copy p { margin: 0; }
.copy p + p { margin-top: 1.3em; text-indent: 1.2em; }

.copy .more {
  margin-top: 3.2em;
  text-indent: 0;
}
.copy .more button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: #3a4ad4;
  text-decoration: underline;
  cursor: pointer;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.copy .more button:hover, .copy .more button:focus-visible { color: #2733b0; outline: none; }

/* 胶囊用的是 app 的桌面绿，白色衬线——和首页那颗深色胶囊刻意不同：
   那颗是能拖的玩具，这颗是个静态的告示。 */
.copy .cta { margin-top: 3.6em; text-indent: 0; }
.pill-static {
  display: inline-block;
  padding: .66em 1.5em;
  border-radius: 999px;
  background: var(--pill-bg);
  color: #fff;
  font-family: var(--body);
  font-size: 1.036em;                 /* 29 / 28 */
  letter-spacing: 0;
  white-space: nowrap;
}

/* ---- 截图轮播 ---- */
.shots {
  margin: 0;
  position: relative;
}
.shots .track {
  position: relative;
  aspect-ratio: 1477 / 913;
}
.shots .track img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .32s ease;
}
.shots .track img.is-on { opacity: 1; position: relative; }

/* 稿子里截图下面那颗小灰胶囊 87×29，白色的 ‹。稿子只画了一个方向，
   这里补上另一个——同一颗胶囊，两个字。 */
.shots .nav {
  display: flex;
  justify-content: center;
  margin-top: -.35%;                  /* 稿子里胶囊顶 1221 比截图底 1235 还高——贴着窗口下缘 */
}
.shots .nav button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0 .55em;
  height: clamp(20px, 1.133vw, 29px);
  background: #c1c1c1;
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(14px, .781vw, 20px);
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease;
}
.shots .nav .prev { border-radius: 999px 0 0 999px; padding-left: .8em; }
.shots .nav .next { border-radius: 0 999px 999px 0; padding-right: .8em; }
.shots .nav button:hover, .shots .nav button:focus-visible { background: #a9a9a9; outline: none; }

/* ---- what's included：一张暖灰圆角卡，弹出来，点外面或 Esc 收回去 ---- */
.included {
  width: max-content;                 /* 按最长的一行收紧 */
  max-width: calc(100vw - 2.4rem);
  max-height: 90svh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: clamp(24px, 1.95vw, 50px);
  background: #e0ded6;
  color: #6374a9;
  box-shadow: 0 30px 90px rgba(32, 32, 32, .22);
  overflow: auto;
}
.included::backdrop {
  background: rgba(32, 32, 32, .26);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.included .card {
  position: relative;
  padding: 1.45em 2.4em 2em 1.9em;    /* 右边多留一点给 × */
  font-size: clamp(14px, 1.133vw, 29px);
}
.included h2 {
  margin: 0 0 1.1em;
  text-align: left;
  font-family: var(--body);
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0;
}
.included ul {
  margin: 0;
  padding: 0 0 0 1.1em;
  list-style: "\2013\00a0";         /* 短横，比圆点更像一张清单 */
  font-family: var(--sans);
  font-size: 1em;
  line-height: 1.65;                  /* 稿子 2.28 装不进一屏；收到能一眼看完 */
  letter-spacing: 0;
}
.included li { padding-left: .2em; white-space: nowrap; }   /* 每条一行 */
.included .close {
  position: absolute;
  top: .55em;
  right: .75em;
  appearance: none;
  border: 0;
  padding: .2em .45em;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.15em;
  line-height: 1;
  cursor: pointer;
  opacity: .55;
}
.included .close:hover, .included .close:focus-visible { opacity: 1; outline: none; }

/* ================= 内页（privacy / support） ================= */
/* 骨架照产品页：标题左上，下面两栏。左栏是短的那样东西（联系方式 / 一句话总结），
   右栏是长的（FAQ / 各节）。字比产品页小、紧，字距全部归零——这是文件，不是版式。 */

.doc {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 6.52% 2.62% 8%;            /* 和产品页一样 */
}
.doc h1 {
  margin: 0 0 1.1em;
  font-family: var(--body);
  font-size: clamp(28px, 2.305vw, 59px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink);
}
.doc-cols {
  display: grid;
  grid-template-columns: 32.6fr 58.1fr;
  gap: 3.9%;
  align-items: start;
}
.doc h2 {
  margin: 0 0 1.2em;
  font-family: var(--sans);
  font-size: clamp(11px, .703vw, 18px);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--slate);
}
.doc h3 {
  margin: 0 0 .3em;
  font-family: var(--body);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0;
}
.doc .prose {
  font-family: var(--body);
  font-size: clamp(13px, .86vw, 16px);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink);
}
.doc .prose p { margin: 0 0 .8em; }
.doc .prose a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.doc .fine { color: var(--slate); font-size: .9em; margin-top: 1.6em; }

/* 还没有内容的页面：空白正中一行灰字。 */
.doc .nothing {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--body);
  font-size: clamp(12px, .78vw, 15px);
  letter-spacing: 0;
  color: #b5b5b5;
  white-space: nowrap;
}

/* 右栏再分两列，每列 55 字左右一行，正好一屏。 */
.doc .qa {
  columns: 2;
  column-gap: 3.2em;
}
.doc .qa > div {
  break-inside: avoid;
  margin: 0 0 1.5em;
}

/* ================= 窄屏 ================= */

@media (max-width: 820px) {
  /* 窄屏不拖，摆正中间就好。 */
  .pill {
    left: 50% !important;
    top: auto !important;
    bottom: 22%;
    transform: translateX(-50%);
    padding: .8rem 1.6rem;
    font-size: 12px;
    cursor: pointer;
  }
  .reset { display: none; }
  .home .tagline { bottom: 12%; font-size: 17px; }

  .foot {
    bottom: 1.6rem;
    padding: 0 1.2rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
    font-size: 11px;
  }

  .product, .doc { padding: 5.5rem 1.2rem 7rem; }
  .wordmark { top: 2.6rem; font-size: 13px; }
  .product .wordmark, .doc .wordmark { font-size: 11px; }
  .product .sub { font-size: 11px; }
  /* 窄屏先看图再读字：截图挪到正文上面。 */
  .cols { grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
  .shots { order: -1; }
  .copy { font-size: 16px; line-height: 1.5; padding-top: 0; text-align: left; hyphens: manual; }
  .copy .more, .copy .cta { margin-top: 2em; }
  .shots .nav button { height: 28px; font-size: 18px; }
  .product { height: auto; overflow: visible; }   /* 窄屏叠成一列，滚是正常的 */
  .included { width: auto; border-radius: 22px; }
  .included .card { font-size: 15px; padding: 1.4rem 1.4rem 1.8rem; }
  .included ul { padding-left: 1.1em; line-height: 1.6; }
  .included li { white-space: normal; }       /* 窄屏装不下一行，允许折 */
  .doc-cols { grid-template-columns: 1fr; gap: 2rem; }
  .doc .qa { columns: 1; }
  .doc .prose { font-size: 15px; }
  .doc h1 { margin-bottom: 1.4rem; }
}

/* 16:9 的屏比稿子的 16:10 矮一截。正文略收，保证一屏装下、页脚不压到胶囊。 */
@media (min-aspect-ratio: 16/9) and (min-width: 821px) {
  .copy { font-size: clamp(13px, 1vw, 26px); }
  .copy .more { margin-top: 2.4em; }
  .copy .cta { margin-top: 2.6em; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}