/* ============================================================
   czlife.app
   A soft, quiet personal biography site.
   Plain CSS, no framework, no build step.
   ============================================================ */

:root{
  /* warm paper palette */
  --paper:      #faf7f2;
  --paper-2:    #f4efe7;
  --card:       #fffdfa;

  --ink:        #2f2a25;
  --ink-2:      #6b625a;
  --ink-3:      #9a9089;

  --accent:     #a9793c;
  --accent-2:   #c8a15a;
  --accent-wash: rgba(169,121,60,.09);

  --line:       rgba(47,42,37,.11);
  --line-soft:  rgba(47,42,37,.06);

  --measure: 34rem;
  --max:     58rem;
  --pad:     clamp(22px, 6vw, 44px);

  --r:    18px;
  --r-lg: 26px;

  --shadow-soft: 0 2px 4px rgba(47,42,37,.03),
                 0 8px 22px rgba(47,42,37,.045);
  --shadow-lift: 0 4px 10px rgba(47,42,37,.05),
                 0 18px 44px rgba(47,42,37,.075);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(200,161,90,.10), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 12%, rgba(169,121,60,.05), transparent 65%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17.5px;
  font-weight:400;
  line-height:1.78;
  letter-spacing:.001em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:rgba(200,161,90,.28); }

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; border-radius:0 0 var(--r) 0;
  font-weight:500; z-index:200;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:6px;
}

hr.rule{
  height:1px;
  border:0;
  margin:0;
  background:linear-gradient(90deg,
              transparent,
              var(--line) 12%,
              var(--line) 88%,
              transparent);
}

/* ---------------- masthead ---------------- */

.masthead{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(250,247,242,.82);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.masthead.settled{ border-bottom-color:var(--line-soft); }

.masthead-inner{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.wordmark{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-size:18px;
  font-weight:500;
  letter-spacing:-.005em;
  text-decoration:none;
  white-space:nowrap;
}

.masthead-right{
  display:flex;
  align-items:center;
  gap:clamp(14px,2.2vw,26px);
}

.masthead-nav{
  display:flex;
  gap:clamp(14px,2.4vw,28px);
}
.masthead-nav a{
  font-size:14.5px;
  font-weight:400;
  color:var(--ink-2);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.masthead-nav a:hover{
  color:var(--ink);
  border-bottom-color:var(--accent-2);
}

/* Language toggle. Reads 中文 while in English, English while in Chinese. */
.lang-toggle{
  flex:none;
  padding:6px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--ink-2);
  font-family:inherit;
  font-size:13.5px;
  line-height:1.5;
  cursor:pointer;
  white-space:nowrap;
  transition:color .25s, border-color .25s, background .25s;
}
.lang-toggle:hover{
  color:var(--ink);
  border-color:var(--accent-2);
  background:var(--accent-wash);
}

/* ---------------- opening ---------------- */

.opening{
  padding:clamp(64px,11vw,116px) 0 clamp(52px,8vw,84px);
}
.opening-inner{ max-width:var(--max); }

/* The photo at the top of the page.
   portrait.webp is a cut out with a transparent background, so it sits
   straight on the paper with no frame, no circle and no shadow. The image
   itself fades out at the bottom so it dissolves into the page.
   For a larger or smaller portrait, change the three numbers in the clamp. */
.portrait-slot{ margin-bottom:clamp(26px,4vw,36px); }

.portrait{
  display:block;
  width:clamp(160px,24vw,240px);
  height:auto;
}

/* Shown only while there is no portrait to load. Keeps the old soft circle. */
.portrait-fallback{
  display:grid;
  place-items:center;
  width:clamp(96px,15vw,124px);
  aspect-ratio:1;
  border-radius:50%;
  box-shadow:var(--shadow-soft), inset 0 0 0 1px rgba(255,255,255,.7);
  background:
    radial-gradient(circle at 32% 26%, #fdf6e9, var(--paper-2) 62%);
  color:var(--accent);
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(28px,4.4vw,36px);
  font-weight:500;
  letter-spacing:.01em;
  user-select:none;
}
img.portrait + .portrait-fallback{ display:none; }

.greeting{
  margin:0;
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-size:clamp(38px,6.6vw,64px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.022em;
}

.opening-text{
  margin:clamp(22px,3vw,30px) 0 0;
  max-width:var(--measure);
  font-size:clamp(17.5px,2vw,19.5px);
  color:var(--ink-2);
  line-height:1.8;
}

.quiet-link{
  display:inline-block;
  margin-top:clamp(26px,4vw,36px);
  font-size:15.5px;
  color:var(--accent);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid rgba(169,121,60,.34);
  transition:border-color .25s, color .25s;
}
.quiet-link:hover{
  color:var(--ink);
  border-bottom-color:var(--ink);
}

/* ---------------- sections ---------------- */

.prose-section{ padding:clamp(58px,9vw,96px) 0; }

.section-label{
  margin:0 0 clamp(20px,3vw,28px);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.section-title{
  margin:0 0 clamp(30px,5vw,46px);
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(27px,4vw,40px);
  font-weight:400;
  line-height:1.16;
  letter-spacing:-.018em;
  max-width:24ch;
}

/* ---------------- long form prose ---------------- */

.prose{ max-width:var(--measure); }

.prose h2{
  margin:clamp(44px,6vw,64px) 0 clamp(14px,2vw,20px);
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(23px,3.2vw,30px);
  font-weight:400;
  line-height:1.24;
  letter-spacing:-.016em;
}
.prose h2:first-child{ margin-top:0; }

.prose p{
  margin:0 0 clamp(18px,2.4vw,24px);
  color:var(--ink-2);
}
.prose p:last-child{ margin-bottom:0; }

.prose em{
  font-style:italic;
  color:var(--ink);
}

/* ---------------- chapters ---------------- */

.chapters{
  list-style:none;
  margin:0;
  padding:0;
  max-width:44rem;
}
.chapters li{
  display:grid;
  grid-template-columns:5.5rem 1fr;
  gap:clamp(14px,3vw,32px);
  padding:clamp(16px,2.4vw,22px) 0;
  border-bottom:1px solid var(--line-soft);
}
.chapters li:last-child{ border-bottom:0; }

.chapter-year{
  font-family:'Fraunces',Georgia,serif;
  font-size:16.5px;
  font-weight:500;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  padding-top:.12em;
}
.chapter-text{
  color:var(--ink-2);
  font-size:16.5px;
  line-height:1.7;
}

/* ---------------- now ---------------- */

.now-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(16px,2.4vw,24px);
}

.soft-card{
  padding:clamp(26px,3.4vw,36px);
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.soft-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift);
}
.soft-card h3{
  margin:0 0 14px;
  font-family:'Fraunces',Georgia,serif;
  font-size:22px;
  font-weight:500;
  letter-spacing:-.012em;
}
.soft-card p{
  margin:0 0 20px;
  color:var(--ink-2);
  font-size:16.5px;
  line-height:1.72;
}
.soft-card .quiet-link{ margin-top:0; font-size:15px; }

/* ---------------- elsewhere ---------------- */

.elsewhere{
  list-style:none;
  margin:0;
  padding:0;
  max-width:44rem;
}
.elsewhere li{ border-bottom:1px solid var(--line-soft); }
.elsewhere li:last-child{ border-bottom:0; }

.elsewhere a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:clamp(15px,2.2vw,20px) 4px;
  text-decoration:none;
  transition:padding-left .3s var(--ease), color .25s;
}
.elsewhere a:hover{ padding-left:12px; }
.elsewhere a span:first-child{ font-size:17px; font-weight:400; }
.elsewhere .where{
  font-size:14.5px;
  color:var(--ink-3);
  transition:color .25s;
}
.elsewhere a:hover .where{ color:var(--accent); }

/* The BNB address row. The address is long, so the row is allowed to wrap
   onto a second line on narrow screens and the address may break anywhere. */
.elsewhere a{ flex-wrap:wrap; }
.elsewhere .addr{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;
  letter-spacing:.01em;
  word-break:break-all;
  text-align:right;
}

/* ---------------- footer ---------------- */

.footer{
  border-top:1px solid var(--line-soft);
  padding:clamp(38px,5vw,56px) 0;
}
.footer-inner{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}
.footer-sign{
  margin:0;
  font-family:'Fraunces',Georgia,serif;
  font-size:17px;
  font-weight:400;
}
.footer-copy{
  margin:0;
  font-size:13.5px;
  color:var(--ink-3);
}

/* ---------------- reveal ---------------- */

.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 110ms);
}
.reveal.shown{ opacity:1; transform:none; }

/* ---------------- Simplified Chinese ----------------
   Latin faces have no CJK glyphs, so the Chinese view falls back to
   the reader's system serif and sans. Chinese also needs a little
   more leading and no negative tracking. */

html[lang="zh-Hans"] body{
  font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei',
              'Noto Sans SC','Noto Sans CJK SC',system-ui,sans-serif;
  line-height:1.92;
  letter-spacing:.012em;
}

html[lang="zh-Hans"] .wordmark,
html[lang="zh-Hans"] .greeting,
html[lang="zh-Hans"] .section-title,
html[lang="zh-Hans"] .prose h2,
html[lang="zh-Hans"] .soft-card h3,
html[lang="zh-Hans"] .footer-sign{
  font-family:'Fraunces','Songti SC','STSong','Noto Serif SC',
              'Noto Serif CJK SC',Georgia,serif;
  letter-spacing:0;
  line-height:1.4;
}

html[lang="zh-Hans"] .greeting{ line-height:1.26; }
html[lang="zh-Hans"] .section-label{ letter-spacing:.09em; }
html[lang="zh-Hans"] .opening-text,
html[lang="zh-Hans"] .prose p{ line-height:1.95; }
html[lang="zh-Hans"] .chapter-text{ line-height:1.85; }

/* ---------------- responsive ---------------- */

@media (max-width:620px){
  body{ font-size:17px; }

  .masthead-inner{ height:64px; }
  .masthead-right{ gap:14px; }
  .masthead-nav{ gap:15px; }
  .masthead-nav a{ font-size:13.5px; }
  .lang-toggle{ padding:5px 11px; font-size:12.5px; }
  .wordmark{ font-size:16.5px; }

  .chapters li{
    grid-template-columns:1fr;
    gap:4px;
  }
  .chapter-year{ padding-top:0; }

  .elsewhere a{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
}

/* The masthead sheds nav links as it narrows so the language
   toggle always stays reachable. */
@media (max-width:540px){
  .masthead-nav a[href="#elsewhere"]{ display:none; }
}
@media (max-width:450px){
  .masthead-nav a[href="#chapters"]{ display:none; }
}
@media (max-width:370px){
  .masthead-nav{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}