/* corners.photos: one stylesheet for every page. The app's own type, Noto Serif SC for Chinese and Cormorant Garamond
   for Latin, subset to this site's words by make-fonts.py (it rewrites the block between the fonts markers). The app's
   black card is the ink, on a warm paper. Nothing here loads from anywhere else. */

/* fonts:begin (written by make-fonts.py) */
@font-face {
  font-family: "Corners Serif SC";
  src: url("fonts/serif-sc-400-a.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-7E,U+B7,U+4E00,U+4E0A,U+4E0D,U+4E2D,U+4F60,U+518C,U+5230,U+5373,U+56DE,U+5728,U+5C06,U+5FC6,U+6210,U+628A,U+6301,U+652F,U+6587,U+6761,U+67B6,U+6B3E,U+7684,U+76F8,U+79C1,U+88C5,U+89D2,U+8BA2,U+8FD9,U+91CC,U+9690,U+9875,U+9996;
}
@font-face {
  font-family: "Corners Serif SC";
  src: url("fonts/serif-sc-400-b.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2014,U+2026,U+3001-3002,U+300C-300D,U+4E09,U+4E0B,U+4E0E,U+4E14,U+4E2A,U+4E3A,U+4E45,U+4E48,U+4E4B,U+4E5F,U+4E66,U+4E70,U+4E86,U+4E8E,U+4E9B,U+4EA4,U+4EAB,U+4EBA,U+4EC0,U+4ECD-4ECE,U+4ED6,U+4ED8,U+4EE5,U+4EEC,U+4EF6-4EF7,U+4EFB,U+4EFD,U+4F1A,U+4F20,U+4F3C,U+4F46,U+4F4D,U+4F55,U+4F5C,U+4F7F,U+4F9B,U+4FDD,U+4FE1,U+4FEE,U+505C,U+50A8,U+513F,U+5141,U+5148,U+514D,U+5165,U+5168,U+5171,U+5173,U+5176,U+5185,U+518D,U+5199,U+51B2-51B3,U+51B5,U+51C6,U+51FA,U+5206,U+5219,U+521D,U+5220,U+522B,U+524D,U+526F,U+529F-52A1,U+52A8,U+5305,U+5316,U+533A,U+534F,U+5355,U+539F,U+53CA,U+53D1,U+53D6,U+53D8,U+53EA,U+53EF,U+53F7,U+540C-540E,U+5411,U+5426,U+542B,U+544A,U+5458,U+5468,U+548C,U+559C,U+5668,U+56E0,U+56FD-56FE,U+5730,U+5740,U+5750,U+578B,U+5904,U+5907,U+590D,U+5929,U+597D,U+5982,U+59D3,U+5B50,U+5B58,U+5B69,U+5B83,U+5B89,U+5B8C,U+5B9A,U+5BB6,U+5BB9,U+5BFC,U+5C0F,U+5C11,U+5C31,U+5D29,U+5DF1-5DF2,U+5E74,U+5E76,U+5E7F,U+5E93,U+5E95,U+5EA6,U+5EAD,U+5F00,U+5F0F,U+5F39,U+5F52-5F53,U+5F55,U+5FC5,U+5FEB,U+6001,U+600E,U+6027,U+6062,U+606F,U+60C5,U+60F3,U+610F,U+6211,U+6216,U+6237,U+6240,U+624B,U+624D,U+6253,U+6258,U+6263,U+627E,U+62A4-62A5,U+62CD,U+62E9,U+62EC,U+62FF,U+6309,U+6311,U+6362,U+636E,U+6389,U+63A5,U+63D0,U+6444,U+64CD,U+6536,U+6539,U+653E-653F,U+6548,U+6570,U+6599,U+65AD,U+65B0,U+65B9,U+65C1,U+65E0,U+65E5,U+65F6,U+660E,U+662F,U+663E,U+666F,U+667A,U+66F4,U+6700,U+6708-6709,U+670D,U+671F,U+672A,U+672C,U+673A,U+6743,U+675F,U+6765,U+6790,U+679C,U+67E5,U+6807,U+6837,U+683C,U+6846,U+6848,U+6A21,U+6B21-6B22,U+6B62,U+6B65,U+6BCF,U+6BD4,U+6C38,U+6C42,U+6CA1,U+6CD5,U+6CE8,U+6D17,U+6D88,U+6E83,U+6E90,U+6EE1,U+70B9,U+7167,U+7247-7248,U+72B6,U+73B0,U+7406,U+751F,U+7528,U+7531,U+7533,U+753B,U+7559,U+767B,U+76EE,U+76F4,U+770B,U+786E,U+793A,U+79CD,U+79F0,U+7A7A,U+7AD9,U+7AE5,U+7AEF,U+7B26,U+7B2C,U+7B49,U+7B56,U+7B80,U+7BA1,U+7BB1,U+7C73,U+7C7B,U+7CBE,U+7CFB,U+7EA6,U+7EC4,U+7ECF,U+7ED3,U+7ED9,U+7EDC,U+7EDF,U+7EED,U+7F51,U+7F6E,U+7FA4,U+7FFB,U+8005,U+800C,U+8054,U+80FD,U+811A,U+8138,U+81EA,U+81F3-81F4,U+83DC,U+85CF,U+884C,U+88AB,U+8981,U+89C1,U+89C4,U+89C6,U+8A00,U+8BA1,U+8BA4,U+8BA9,U+8BAE,U+8BB0,U+8BB8,U+8BBE-8BBF,U+8BC6,U+8BC9-8BCA,U+8BE2,U+8BED,U+8BF4,U+8BF7,U+8BFB,U+8C01,U+8D26,U+8D2D,U+8D34,U+8D39,U+8D44,U+8D77,U+8E2A,U+8EAB,U+8F7B,U+8F7D,U+8FB9,U+8FC7,U+8FD1,U+8FD8,U+8FDB,U+8FDE,U+8FFD,U+9000-9002,U+9009,U+9014,U+901A,U+9047,U+907F,U+90A3,U+90AE,U+90E8,U+90FD,U+91CD,U+95ED-95EE,U+95F4,U+9605,U+9644,U+9650,U+9664,U+968F,U+96C6,U+9700,U+975E,U+9762,U+9879,U+9891,U+9898,U+9AA4,U+9ED8,U+FF08-FF09,U+FF0C,U+FF1A-FF1B;
}
@font-face {
  font-family: "Corners Serif SC";
  src: url("fonts/serif-sc-600-a.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-7E,U+76F8,U+89D2;
}
@font-face {
  font-family: "Corners Serif SC";
  src: url("fonts/serif-sc-600-b.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+B7,U+4E0D,U+4E70,U+4EAB,U+4EBA,U+4EEC,U+4EF6,U+4F1A,U+4F60,U+513F,U+5171,U+5199,U+5220,U+53D6,U+53D8,U+540C-540D,U+5458,U+5730,U+590D,U+5BB6,U+6062,U+6211,U+6216,U+6301,U+636E,U+652F,U+6536,U+653F,U+6570,U+66F4,U+672C,U+6761,U+6B3E,U+6B65,U+6D88,U+7167,U+7247,U+7406,U+7684,U+79C1,U+7AD9,U+7AE5,U+7B56,U+7BA1,U+7CFB,U+7ED9,U+7F51,U+8054,U+8BA2,U+8D2D,U+8E2A,U+8FFD,U+90AE,U+9605,U+9664,U+9690,U+96C6,U+FF0C;
}
@font-face {
  font-family: "Corners Garamond";
  src: url("fonts/garamond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Corners Garamond";
  src: url("fonts/garamond-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* fonts:end */

:root {
  --paper: #f5eee3;
  --ink: #1d1b18;
  --ink-2: #5a564f;
  --rule: rgba(29, 27, 24, 0.16);
  --link-line: rgba(29, 27, 24, 0.36);
  --serif-zh: "Corners Serif SC", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --serif-en: "Corners Garamond", "Cormorant Garamond", "Corners Serif SC", "Noto Serif SC", Georgia, serif;
  --measure: 34rem;
  --gutter: 16px;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-zh);
  font-size: 1.0625rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

:lang(zh) {
  font-family: var(--serif-zh);
}

:lang(en) {
  font-family: var(--serif-en);
  letter-spacing: 0;
}

html:lang(en) body {
  font-size: 1.3125rem;
  line-height: 1.5;
}

::selection {
  background: rgba(197, 154, 46, 0.32);
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--link-line);
  text-underline-offset: 0.24em;
}

a:hover {
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* the pages: a masthead, one column, a colophon */

.page {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  line-height: 1.5;
}

.masthead a,
.colophon a {
  text-decoration-line: none;
}

.masthead a:hover,
.colophon a:hover {
  text-decoration-line: underline;
}

.brand {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.brand [lang="zh-Hans"] {
  letter-spacing: 0.08em;
}

.brand [lang="en"] {
  font-size: 1.12em;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.switch {
  font-size: 1rem;
  color: var(--ink-2);
}

.switch:lang(en) {
  font-size: 1.1875rem;
}

main {
  padding-top: 3.25rem;
}

h1,
h2 {
  text-wrap: balance;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.875rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.06em;
}

h2 {
  margin: 2.5rem 0 0.625rem;
  font-size: 1.1875rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.04em;
}

html:lang(en) h1 {
  font-size: 2.625rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
}

html:lang(en) h2 {
  margin-top: 2.25rem;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.005em;
}

.meta {
  margin: 0 0 2.25rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

html:lang(en) .meta {
  font-size: 1.125rem;
}

p,
ul {
  margin: 0 0 1em;
}

p,
li {
  text-wrap: pretty; /* no lone last character, where the browser can */
}

ul {
  padding-left: 1.25em;
}

li {
  margin: 0 0 0.5em;
  padding-left: 0.15em;
}

li::marker {
  color: var(--ink-2);
}

.colophon {
  margin-top: 3.5rem;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.8;
}

html:lang(en) .colophon {
  font-size: 1.125rem;
}

.colophon p {
  margin: 0;
}

.sep {
  margin: 0 0.55em;
}

@media (min-width: 48rem) {
  .masthead {
    padding-top: 2.25rem;
  }

  main {
    padding-top: 4.5rem;
  }
}

/* the home page and the 404: a title page, centred */

.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.title {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem var(--gutter) 2.5rem;
  text-align: center;
}

.icon {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 0 1.75rem;
  border-radius: 22.37%;
  box-shadow:
    0 0 0 0.5px rgba(29, 27, 24, 0.14),
    0 1px 2px rgba(29, 27, 24, 0.12),
    0 12px 24px -12px rgba(29, 27, 24, 0.4);
}

.name {
  margin: 0;
  padding-left: 0.14em; /* the letter-spacing after the last character, so the name sits centred */
  font-size: 3.25rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.name [lang="en"] {
  display: block;
  margin-top: 0.875rem;
  padding-left: 0.32em;
  font-size: 0.9375rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.line {
  margin: 2.5rem 0 0;
  padding-left: 0.1em;
  font-size: 1.375rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.line[lang="en"] {
  margin-top: 0.25rem;
  padding-left: 0;
  font-size: 1.3125rem;
  letter-spacing: 0.005em;
}

.status {
  margin: 2.25rem 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.status [lang="en"] {
  display: block;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
}

.home .colophon {
  margin: 0;
  padding: 0 var(--gutter) 2.25rem;
  border-top: 0;
  text-align: center;
}

.home .colophon [lang="en"] {
  font-size: 1.125rem;
  line-height: 1.6;
}