/* Stephanie Permut — personal site
   Theme: "Column · December" — sticky left rail + scrolling content.
   Palette drawn from the Japanese traditional "December" colors:
   紅柿色 Jasper Red · 空色 Salvia Blue · 淡卵色 Pale Lemon · 憲法色 Sepia · 銀鼠 Neutral Gray */

:root{
  --paper:#f7f3e6;    /* faint pale-lemon warm paper */
  --panel:#efe8d1;    /* pale-lemon tint (card hover) */
  --ink:#302819;      /* 憲法色 sepia */
  --muted:#6f6553;
  --faint:#a49c8a;    /* toward 銀鼠 neutral gray */
  --line:#e6ddc9;
  --accent:#c8431f;   /* 紅柿色 jasper red — primary accent */
  --blue:#828aa6;     /* 空色 salvia blue */
  --blue-deep:#565f80;/* readable salvia for headings */
  --rail-bg:#e8ebf2;  /* soft salvia surface for the rail */
  --serif:'Merriweather',Georgia,'Times New Roman',serif;
  --sans:'Open Sans',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* creative bolding: key terms/phrases carry the jasper accent */
.content strong{color:var(--accent);font-weight:700}

/* inline text links */
.inlink{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:opacity .2s}
.inlink:hover{opacity:.7}

.shell{display:grid;grid-template-columns:300px 1fr;gap:0;max-width:1120px;margin:0 auto;min-height:100vh}
@media(max-width:820px){.shell{grid-template-columns:1fr}}

/* ---- left rail ---- */
.rail{background:var(--rail-bg);border-right:1px solid #dde0ea;padding:56px 40px}
.rail .inner{position:sticky;top:56px}
@media(max-width:820px){
  .rail{border-right:0;border-bottom:1px solid #dde0ea;padding:44px 32px 34px}
  .rail .inner{position:static}
}
.portrait{
  width:88px;height:88px;object-fit:cover;object-position:center 25%;border-radius:50%;
  filter:grayscale(6%);margin-bottom:22px;display:block;
  box-shadow:0 0 0 3px var(--rail-bg),0 0 0 4px var(--accent);
}
.rail h1{font-family:var(--serif);font-weight:700;font-size:1.62rem;letter-spacing:-.01em;line-height:1.18;margin-bottom:5px}
.rail .nee{font-family:var(--sans);font-size:.82rem;font-weight:400;color:var(--faint);letter-spacing:.01em;margin-bottom:18px}
.rail .role{font-size:.9rem;color:var(--muted);line-height:1.45;margin-bottom:28px;max-width:24ch}
.rail nav{display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.rail nav a{
  text-decoration:none;font-size:.92rem;color:var(--muted);width:max-content;
  border-bottom:1px solid transparent;padding-bottom:1px;transition:.2s;
}
.rail nav a:hover{color:var(--ink);border-color:var(--accent)}
.rail nav a .idx{color:var(--accent);font-size:.74rem;margin-right:9px}
.rail .mail{font-size:.86rem;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}

/* ---- content ---- */
.content{padding:56px 56px 70px}
@media(max-width:820px){.content{padding:40px 32px 60px}}
.content>section{padding:0 0 32px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.content>section:last-child{border-bottom:0;margin-bottom:0}
.h{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.h .idx{color:var(--blue);font-size:.8rem;font-weight:600}
.h h2{font-family:var(--serif);font-weight:700;font-size:1.12rem;letter-spacing:0;color:var(--blue-deep)}

.content .lede{font-family:var(--serif);font-size:1.5rem;font-weight:400;line-height:1.36;letter-spacing:-.005em;margin-bottom:8px;max-width:40ch}
.lede em{font-style:normal;font-weight:700;color:var(--accent)}
.content .subintro{margin-top:18px;font-size:1.02rem;color:var(--muted)}
#intro{border-bottom:1px solid var(--line);padding-bottom:32px;margin-bottom:32px}

.content p{color:#413d34;font-size:.94rem;line-height:1.5;margin-bottom:11px;max-width:62ch}
.content p:last-child{margin-bottom:0}

/* ---- work ---- */
.work-intro{margin-bottom:20px}
.entry{display:block;text-decoration:none;padding:20px 22px;margin:0 -22px;border-radius:8px;transition:background .2s}
.entry:hover{background:var(--panel)}
.entry+.entry{margin-top:4px}
.entry .meta{font-size:.74rem;letter-spacing:.02em;color:var(--accent);font-weight:600;margin-bottom:6px;text-transform:uppercase}
.entry.alt .meta{color:var(--blue-deep)}
.entry h3{font-family:var(--serif);font-weight:700;font-size:1.12rem;letter-spacing:-.005em;line-height:1.35;margin-bottom:9px}
.entry p{font-size:.96rem;color:var(--muted);margin:0}
.entry .out{font-size:.78rem;color:var(--accent);margin-top:8px;display:inline-block}

/* ---- cv (coming soon) ---- */
.soon{display:inline-block;font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--blue-deep);
  background:var(--rail-bg);border:1px solid #dde0ea;border-radius:999px;
  padding:3px 11px;margin-left:6px;vertical-align:middle}

/* ---- contact ---- */
.contact-line{margin-bottom:18px}
.bigmail{font-size:1.4rem;font-weight:500;letter-spacing:-.01em;text-decoration:none;
  border-bottom:1px solid var(--accent);padding-bottom:3px}
.foot{font-size:.76rem;color:var(--faint);margin-top:40px}