/* laurencefavrot.com — Dusk & Paper */
:root{
  --dusk:#1e1c19; --dusk-line:#35322c;
  --ink-on-dusk:#e8e2d6; --muted-on-dusk:#b8b1a2; --faint-on-dusk:#8f887a;
  --amber:#d9a05b; --amber-dim:rgba(217,160,91,.4);
  --paper:#f7f2e7; --paper-line:#e5dcc8;
  --ink:#2b2620; --body:#453e35; --faint:#a3987f; --faint-italic:#8c8069;
  --amber-paper:#b07a34; --amber-paper-dim:rgba(176,122,52,.35);
  --serif:'EB Garamond',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--serif);font-size:18.5px;line-height:1.66;
  display:flex;justify-content:center;min-height:100vh}
main{width:min(680px,100%);padding:clamp(28px,6vw,64px) clamp(20px,5vw,32px) clamp(48px,8vw,88px)}
body.dark{background:var(--dusk);color:var(--ink-on-dusk)}
body.paper{background:var(--paper);color:var(--ink)}
body.wide main{width:min(760px,100%)}
::selection{background:var(--amber-dim)}
/* nav */
nav{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:clamp(56px,10vw,96px)}
nav .name{font-size:17px;text-decoration:none;color:inherit}
nav .links{display:flex;gap:24px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.dark nav .links a{color:var(--faint-on-dusk);text-decoration:none}
.dark nav .links a:hover,.dark nav .links a[aria-current]{color:var(--ink-on-dusk)}
.paper nav .links a{color:var(--faint);text-decoration:none}
.paper nav .links a:hover{color:var(--ink)}
.paper nav .links a[aria-current]{color:var(--amber-paper)}
/* type */
h1{font-size:clamp(30px,5.5vw,40px);font-weight:400;line-height:1.24;margin:0 0 36px;max-width:600px}
.dark h1{margin-bottom:44px;max-width:540px}
.accent{color:var(--amber);font-style:italic}
p{margin:0 0 24px;max-width:540px}
.dark p{color:var(--muted-on-dusk)}
.paper p{color:var(--body)}
p:last-child{margin-bottom:0}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 14px}
h2{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-paper);margin:0 0 16px}
.lede{font-size:19.5px;line-height:1.6;color:var(--ink);margin-bottom:40px}
.lede strong{font-weight:500}
.lede p{color:var(--ink);margin:0 0 18px}
.lede p:last-child{margin-bottom:0}
section{margin-bottom:40px}
section:last-child{margin-bottom:0}
ul,ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:14px;max-width:540px;color:var(--body)}
ol{margin-bottom:24px}
ul strong,ol strong,.paper p strong{font-weight:500;color:var(--ink)}
/* links in text */
.dark a{color:var(--amber)}
.paper a{color:var(--amber-paper)}
p a,li a{text-decoration:none;border-bottom:1px solid var(--amber-paper-dim)}
.dark p a{border-bottom-color:var(--amber-dim)}
p a:hover,li a:hover{border-bottom-color:currentColor}
em{font-style:italic}
/* "keep reading" pointer */
.more{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:-6px}
.more a{text-decoration:none;border:none;color:var(--amber)}
.paper .more a{color:var(--amber-paper)}
.more a:hover{color:var(--ink-on-dusk)}
.paper .more a:hover{color:var(--ink)}
/* case-study margin notes */
.with-aside{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.with-aside>.main{flex:1 1 420px;min-width:0}
aside{flex:1 1 170px;max-width:220px;border-left:1px solid var(--paper-line);padding-left:20px;
  display:flex;flex-direction:column;gap:24px;font-style:italic;color:var(--faint-italic);font-size:14px;line-height:1.55}
aside .label{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-paper);margin:0 0 4px}
aside p{margin:0;color:inherit}
/* essay margin notes (float into right gutter; text column stays 540px) */
.note{float:right;clear:right;width:180px;margin:4px -54px 28px 30px;border-left:none;padding-left:0}
@media(max-width:840px){.note{float:none;width:auto;max-width:540px;margin:0 0 24px}}
/* footer */
footer{border-top:1px solid var(--paper-line);margin-top:64px;padding-top:26px;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.dark footer{border-top-color:var(--dusk-line)}
footer .bio{font-size:15.5px;font-style:italic;max-width:400px;margin:0;color:var(--faint-italic)}
.dark footer .bio{color:var(--faint-on-dusk)}
footer .email{font-family:var(--mono);font-size:12px;text-decoration:none;border:none;color:var(--faint)}
.dark footer .email{color:var(--muted-on-dusk)}
footer .email:hover{color:var(--amber-paper)}
.dark footer .email:hover{color:var(--amber)}
footer a.bio{text-decoration:none}
footer a.bio:hover{color:var(--ink)}

/* nutshells: piece dek, writing-list rows, map page (added 8/20) */
.dek{font-style:italic;color:var(--faint-italic);margin:0 0 36px;font-size:18px;max-width:560px}
.maplink{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 34px}
.maplink a{color:var(--amber-paper);text-decoration:none}
.maplink a:hover{color:var(--ink)}
.wrow{margin:0 0 26px}
.wrow p{margin:0}
.wrow .wt a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--amber-paper-dim)}
.wrow .wt a:hover{color:var(--amber-paper)}
.wrow .wd{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase;margin-left:10px}
.wrow .wn{font-style:italic;color:var(--faint-italic);font-size:15.5px;max-width:540px;margin-top:2px}
.spine{font-size:19px;color:var(--ink);max-width:600px;margin-bottom:44px}
.node{border:1px solid var(--paper-line);background:#fcf8ee;padding:15px 20px 13px;margin:0 0 12px;max-width:640px}
.node p{max-width:none}
.node .nt{font-size:19px;color:var(--ink);margin:0 0 4px}
.node .nt a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--amber-paper-dim)}
.node .nt a:hover{color:var(--amber-paper)}
.node .nd{font-size:16px;line-height:1.55;color:var(--body);margin:0 0 8px}
.node .ne{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--faint);text-transform:uppercase;margin:0}
.chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--paper-line);color:var(--faint);padding:1.5px 7px;vertical-align:3px;margin-left:6px;white-space:nowrap}
.chip.shipped,.chip.inedit{border-color:var(--amber-paper-dim);color:var(--amber-paper)}

/* mobile diagrams pan instead of shrinking to illegibility (8/21) */
.diagram{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:640px){.diagram svg{min-width:560px}}
/* map: sketch cards recede slightly so shipped work anchors the page (8/21) */
.node:not(:has(.chip.shipped)){opacity:.78}

/* quiet invitation link in the dark footer (8/21) */
.dark footer .bio a{color:var(--muted-on-dusk);text-decoration:none;border-bottom:1px solid var(--amber-dim)}
.dark footer .bio a:hover{color:var(--ink-on-dusk)}

/* multi-link rows wrap between links, never inside one (8/21) */
.more a{white-space:nowrap}