/* Pages C: blog, guides, changelog, vision, press, privacy, credits, 404. Prefix .c- */

/* ---------- story cards (blog index, keep reading) ---------- */
.c-stories{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 24px;margin-top:64px}
.c-story{display:flex;flex-direction:column;text-align:left}
.c-story__img{position:relative;aspect-ratio:16/10;border-radius:28px;background:#f6f6f6;overflow:hidden;transition:transform .6s var(--e)}
.c-story:hover .c-story__img{transform:scale(.985)}
.c-story h2,.c-story h3{margin-top:24px;font-size:26px;line-height:32px;font-weight:650;letter-spacing:-.02em}
.c-story h3{font-size:21px;line-height:27px;margin-top:18px}
.c-story p{margin-top:10px;font-size:16px;line-height:24px;color:var(--grey);max-width:520px}
.c-story__meta{margin-top:14px;font-size:14px;line-height:20px;color:var(--grey);font-variant-numeric:tabular-nums}
.c-story:hover h2,.c-story:hover h3{color:var(--blue)}
.c-stories--3{grid-template-columns:repeat(3,1fr);gap:40px 20px;margin-top:40px}
.c-stories--3 .c-story__img{border-radius:24px}

/* the real-image compositions inside a story tile */
.c-v{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.c-v--row{gap:1%;padding:0 3% 13%}
.c-v--row img{flex:none;width:23%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.12))}
.c-v--row img:first-child{width:19%}
.c-v--one{align-items:center;padding:7% 0}
.c-v--one img{height:100%;width:auto;filter:drop-shadow(0 16px 22px rgba(0,0,0,.14))}
.c-v--duo{align-items:center;padding:6% 7%}
.c-v--duo img{width:100%;height:100%;object-fit:contain}
.c-v--wall{background:#f6f6f6}
.c-v--text{flex-direction:column;justify-content:center;align-items:center;gap:6%;padding:0 9%;background:#fff;box-shadow:inset 0 0 0 1px var(--hair);border-radius:inherit}
.c-v--text figure{width:100%;height:36%;display:grid;grid-template-columns:62px 1fr;align-items:center;gap:14px}
.c-crop{position:relative;height:100%;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.c-crop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 0}
.c-v--text figcaption{font-size:13px;line-height:16px;font-weight:600;color:var(--grey);text-align:right}

/* ---------- article ---------- */
.c-ahead{padding:168px 0 0;text-align:center}
.c-ahead h1{max-width:900px;margin:0 auto;font-size:clamp(34px,5.2vw,58px);line-height:1.06;font-weight:652;letter-spacing:-.025em}
.c-ahead .meta-line{margin-top:24px}
.c-sum{max-width:700px;margin:40px auto 0;padding:26px 30px;border-radius:24px;background:#f6f6f6;text-align:left;font-size:17px;line-height:27px;color:#2b2b2b}
.c-sum b{display:block;margin-bottom:6px;font-size:15px;line-height:20px;font-weight:650;color:var(--ink)}
.c-hero{margin-top:56px}
.c-hero .c-story__img{aspect-ratio:21/9;border-radius:32px}
.c-hero .c-v--text{gap:5%;padding:0 18%}
.c-hero .c-v--text figure{grid-template-columns:110px 1fr}
.c-body{padding-top:72px}
.prose .c-wide{width:min(1068px,calc(100vw - 40px));margin-left:calc(50% - min(534px,calc(50vw - 20px)))}
.prose .tbl{margin-top:0;font-size:14.5px}
.prose .tbl td,.prose .tbl th{padding:13px 12px}
.prose .tbl th{white-space:nowrap}
.prose .c-wide .tbl{min-width:900px}
.prose .tbl{min-width:520px}
.prose .tbl td:first-child{font-weight:600;color:var(--ink)}
.prose .c-tcap{font-size:14px;line-height:21px;color:var(--grey)}
.prose ul.c-dots{list-style:none;padding-left:0}
.prose ul.c-dots > li{position:relative;padding-left:22px}
.prose ul.c-dots > li::before{content:"";position:absolute;left:3px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.prose blockquote{padding-left:20px;border-left:3px solid #e6e6e6;color:#444}
.prose .c-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:36px 0}
.prose .c-pair figure{margin:0}
.c-faqsec .faq{margin-top:32px}

/* ---------- changelog ---------- */
.c-log{max-width:900px;margin:56px auto 0}
.c-rel{display:grid;grid-template-columns:200px 1fr;gap:40px;position:relative;padding:0 0 72px}
.c-rel::before{content:"";position:absolute;left:5px;top:12px;bottom:-12px;width:1px;background:#e8e8e8}
.c-rel:last-child::before{display:none}
.c-rel__side{position:relative;padding-left:32px}
.c-rel__side::before{content:"";position:absolute;left:0;top:7px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #c9c9c9}
.c-rel:first-child .c-rel__side::before{box-shadow:none;background:var(--blue)}
.c-rel__v{display:block;font-size:20px;line-height:24px;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.c-rel__d{display:block;margin-top:6px;font-size:14px;line-height:20px;color:var(--grey)}
.c-rel__on{display:inline-block;margin-top:10px;padding:3px 10px;border-radius:999px;background:var(--soft);font-size:12.5px;line-height:18px;font-weight:600;color:#555}
.c-rel__main h2{font-size:28px;line-height:34px;font-weight:650;letter-spacing:-.02em}
.c-rel__main > p{margin-top:10px;font-size:17px;line-height:27px;color:var(--grey)}
.c-rel__main h3{margin-top:28px;font-size:15px;line-height:20px;font-weight:650}
.c-rel__main ul{list-style:none;margin-top:10px;display:grid;gap:10px}
.c-rel__main li{position:relative;padding-left:20px;font-size:16px;line-height:25px;color:#3a3a3a}
.c-rel__main li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.c-rel__main li b{font-weight:650;color:var(--ink)}
.c-rel__main figure{margin-top:28px}
.c-rel__main figure img{width:100%;border-radius:18px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.c-rel__main figcaption{margin-top:10px;font-size:14px;line-height:20px;color:var(--grey)}

/* ---------- vision (reading page) ---------- */
.c-read{max-width:700px;margin:0 auto}
.c-lede{font-size:24px;line-height:34px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.c-lede + p{margin-top:24px}
.c-road{display:grid;gap:16px;margin-top:40px}
.c-road__item{padding:28px 30px;border-radius:24px;background:#f6f6f6}
.c-road__item h3{margin:0;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;font-size:21px;line-height:28px;font-weight:650;color:var(--ink)}
.c-road__item p{margin-top:8px;font-size:16px;line-height:25px;color:#4a4a4a}
.c-road__st{flex:none;margin-top:2px;padding:3px 10px;border-radius:999px;background:#fff;font-size:12.5px;line-height:18px;font-weight:600;color:#555}
.c-road__st--now{background:var(--blue);color:#fff}
.c-figwide{margin:64px auto 0;max-width:1068px;padding:64px 12% 28px;border-radius:32px;background:#f6f6f6}
.c-figwide img{width:100%}
.c-figwide figcaption{margin-top:20px;text-align:center;font-size:14px;line-height:20px;color:var(--grey)}

/* ---------- press / privacy / credits ---------- */
.c-facts{max-width:860px;margin:48px auto 0;border-top:1px solid var(--hair)}
.c-facts > div{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:18px 4px;border-bottom:1px solid var(--hair)}
.c-facts dt{font-size:15px;line-height:24px;font-weight:600;color:var(--grey)}
.c-facts dd{font-size:17px;line-height:26px}
.c-brand{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.c-brand a{display:flex;flex-direction:column;border-radius:28px;background:#f6f6f6;padding:20px;transition:transform .5s var(--e)}
.c-brand a:hover{transform:scale(.985)}
.c-brand__pic{aspect-ratio:16/10;border-radius:18px;background:#fff;display:grid;place-items:center}
.c-brand__pic--dark{background:#141414}
.c-brand__pic img{max-width:46%;max-height:44%}
.c-brand__pic img.c-ico{max-width:none;max-height:none;width:84px;height:84px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.12))}
.c-brand b{margin-top:16px;padding:0 6px;font-size:16px;line-height:22px;font-weight:650}
.c-brand span{padding:0 6px;margin-top:2px;font-size:14px;line-height:20px;color:var(--grey)}
.c-credits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.c-credit{border-radius:24px;background:#f6f6f6;padding:16px 16px 18px;display:flex;flex-direction:column}
.c-credit__pic{position:relative;aspect-ratio:4/3;border-radius:16px;background:#fff}
.c-credit__pic img{position:absolute;left:12%;top:12%;width:76%;height:76%;object-fit:contain}
.c-credit__pic--wall{padding:0;overflow:hidden}
.c-credit__pic--wall img{left:0;top:0;width:100%;height:100%;object-fit:cover}
.c-credit b{margin-top:14px;font-size:14.5px;line-height:20px;font-weight:650}
.c-credit span{margin-top:4px;font-size:13px;line-height:18px;color:var(--grey)}
.c-credit span a{color:var(--blue)}
.c-small{max-width:760px;margin:40px auto 0;text-align:center;font-size:15px;line-height:24px;color:var(--grey)}
.c-small a{color:var(--blue)}

/* ---------- 404 ---------- */
.c-404{padding:168px 0 140px;text-align:center}
.c-404__pic{width:min(360px,70vw);margin:0 auto 40px;filter:drop-shadow(0 20px 28px rgba(0,0,0,.14))}
.c-404 .ph__h{font-size:clamp(36px,6vw,64px)}

@media (max-width:900px){
  .c-stories--3{grid-template-columns:1fr 1fr}
  .c-stories--3 .c-story:nth-child(3){display:none}
  .c-credits{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .c-stories,.c-stories--3{grid-template-columns:1fr;gap:44px}
  .c-stories--3 .c-story:nth-child(3){display:flex}
  .c-story h2{font-size:23px;line-height:29px}
  .c-story__img{border-radius:22px}
  .c-ahead{padding-top:128px}
  .c-sum{padding:22px 22px;font-size:16px;line-height:26px}
  .c-hero{margin-top:40px}
  .c-hero .c-story__img{aspect-ratio:16/11;border-radius:22px}
  .c-hero .c-v--text{padding:0 7%}
  .c-hero .c-v--text figure,.c-v--text figure{grid-template-columns:44px 1fr;gap:10px}
  .c-v--text{padding:0 6%}
  .c-body{padding-top:48px}
  .prose .c-pair{grid-template-columns:1fr}
  .c-rel{grid-template-columns:1fr;gap:16px;padding-bottom:56px}
  .c-rel__side{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
  .c-rel__d,.c-rel__on{margin-top:0}
  .c-rel__main{padding-left:32px}
  .c-rel__main h2{font-size:23px;line-height:29px}
  .c-lede{font-size:21px;line-height:30px}
  .c-road__item{padding:22px}
  .c-road__item h3{font-size:19px;line-height:25px}
  .c-figwide{padding:28px 5% 18px;border-radius:24px;margin-top:40px}
  .c-facts > div{grid-template-columns:1fr;gap:2px}
  .c-brand{grid-template-columns:1fr 1fr;gap:12px}
  .c-brand a{padding:14px;border-radius:22px}
  .c-credits{grid-template-columns:1fr 1fr;gap:12px}
}

.c-figwide--photo{background:none;padding:0}
.c-figwide--photo img{display:block;width:100%;height:auto;border-radius:28px;box-shadow:none}