/* daneross.com v9 · Journal. Journal article: masthead, title block, abstract, body column with marginalia (sidenotes), figures, table, endnotes. */
:root{
  --paper:#fcfcfa;
  --ink:#151515;
  --mute:#5a5a56;
  --rule:#d9d8d2;
  --signal:#b8740d;   /* figure trace and small accents */
  --tint:#f3f2ec;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --label:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);margin:0;font:400 19px/1.62 var(--serif);font-optical-sizing:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.page{max-width:1040px;margin:0 auto}
.lab{font:600 12px/1.3 var(--label);letter-spacing:.12em;text-transform:uppercase}

/* masthead */
.mast{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-block:22px 12px;border-bottom:2px solid var(--ink)}
.mast .name{font:700 1.5rem/1 var(--serif);letter-spacing:-.01em;text-decoration:none}
.mast .name small{font:italic 400 1rem/1 var(--serif);color:var(--mute);margin-left:10px;letter-spacing:0}
.mast nav{display:flex;gap:18px;flex-wrap:wrap}
.mast nav a{text-decoration:none;color:var(--mute)}
.mast nav a[aria-current]{color:var(--ink)}
.issue{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:8px;border-bottom:1px solid var(--rule);color:var(--mute)}

/* title block */
.head{padding-block:56px 36px;max-width:820px}
.kind{color:var(--signal);margin-bottom:18px}
h1{font:600 clamp(2.4rem,6vw,4.4rem)/1.02 var(--serif);letter-spacing:-.025em;margin:0 0 20px;text-wrap:balance}
.deck{font:400 clamp(1.2rem,2.2vw,1.5rem)/1.4 var(--serif);color:#333;margin:0 0 26px;max-width:40ch}
.by{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--mute);font:400 1rem/1.4 var(--serif)}
.by img{width:44px;height:44px;object-fit:cover;object-position:50% 25%;}
.by b{color:var(--ink);font-weight:600}

/* body grid with margin column */
.body{display:grid;grid-template-columns:minmax(0,640px) 1fr;column-gap:56px;border-top:1px solid var(--rule);padding-top:36px}
.body > *{grid-column:1}
.body aside,.body .side{grid-column:2;font:400 .82rem/1.45 var(--serif);color:var(--mute)}
@media (max-width:900px){.body{grid-template-columns:minmax(0,1fr)}.body aside,.body .side{grid-column:1;border-left:2px solid var(--rule);padding-left:14px;margin-block:4px 22px}}

.abstract{background:var(--tint);padding:22px 24px;margin-bottom:34px;font-size:1rem;line-height:1.55}
.abstract .lab{display:block;margin-bottom:8px}
.abstract p{margin:0 0 10px}
.abstract .kw{margin:0;color:var(--mute);font-size:.92rem}
.abstract .kw i{color:var(--ink)}

h2{font:600 1.5rem/1.2 var(--serif);margin:42px 0 14px;letter-spacing:-.01em}
h2 .no{font:500 .9rem/1 var(--mono);color:var(--signal);margin-right:12px;vertical-align:.18em}
p{margin:0 0 1.05em}
.dropcap::first-letter{float:left;font:600 4.1em/.8 var(--serif);padding:.06em .08em 0 0}
sup a{font:500 .7rem/1 var(--mono);text-decoration:none;color:var(--signal);padding-left:1px}
blockquote.pull{margin:30px 0;padding:0;font:italic 400 1.6rem/1.3 var(--serif);letter-spacing:-.01em;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding-block:18px}
.side .lab{display:block;color:var(--ink);margin-bottom:6px}
.side q{display:block;font:italic 400 .98rem/1.4 var(--serif);color:var(--ink);quotes:"“" "”"}
.side cite{display:block;font-style:normal;margin-top:6px}
.side ul{margin:0;padding-left:16px}

/* figure */
figure{margin:30px 0}
figure svg{width:100%;height:auto;background:var(--tint)}
figcaption{font:400 .9rem/1.45 var(--serif);color:var(--mute);margin-top:10px}
figcaption b{font:600 12px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-right:6px}
.fig .grid line{stroke:#e2e1da;stroke-width:1}
.fig .trace{fill:none;stroke:var(--signal);stroke-width:2.5;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 4.5s ease-in-out .3s forwards}
.fig .dim{stroke:var(--ink);stroke-width:1;fill:none}
.fig text{font:400 11px var(--mono);fill:var(--ink)}
@keyframes draw{to{stroke-dashoffset:0}}
.eq{font:400 1.25rem/1.4 var(--serif);text-align:center;margin:26px 0;padding:16px;border-block:1px solid var(--rule)}
.eq i{font-style:italic}

/* table */
.tbl{overflow-x:auto;margin:26px 0}
table{border-collapse:collapse;width:100%;font:400 .92rem/1.4 var(--serif)}
caption{text-align:left;caption-side:top;padding-bottom:8px;color:var(--mute);font-size:.9rem}
caption b{font:600 12px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-right:6px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);font:600 12px/1.2 var(--label);letter-spacing:.08em;text-transform:uppercase}
td.n{font-family:var(--mono);font-size:.85rem}

/* end matter */
.end{border-top:2px solid var(--ink);margin-top:44px;padding-top:20px}
.notes{font-size:.9rem;line-height:1.5;color:#333;padding-left:20px}
.notes li{margin-bottom:8px}
.author{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;margin-top:30px;align-items:start}
.author img{width:120px;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;}
.author p{font-size:1rem}
.cite{font:400 .85rem/1.5 var(--mono);background:var(--tint);padding:14px 16px;margin-top:26px;overflow-wrap:anywhere}
.corr{margin-top:34px;border-top:1px solid var(--rule);padding-top:20px}
.corr form{display:grid;gap:12px;max-width:560px;margin-top:12px}
.corr label{display:block;font:600 12px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.corr input,.corr textarea{width:100%;font:inherit;font-size:1rem;padding:10px 12px;border:1px solid #b9b8b0;background:#fff;color:var(--ink);border-radius:0}
.corr textarea{min-height:110px}
.corr button{justify-self:start;font:600 13px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;padding:14px 20px;border:0;background:var(--ink);color:var(--paper);cursor:pointer}
#st{min-height:1.3em;color:var(--mute);margin:0}
footer{border-top:1px solid var(--rule);margin-top:56px;padding-block:18px 40px;color:var(--mute);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.9rem}
@media (max-width:560px){.author{grid-template-columns:1fr}.author img{width:110px}}
@media (prefers-reduced-motion:reduce){.fig .trace{animation:none;stroke-dashoffset:0}}

/* v6 site additions */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:10}
.skip:focus{left:16px;top:16px}
.hp{position:absolute;left:-9999px}
.coming{list-style:none;padding:0;margin:8px 0 0}
.coming li{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule)}
.coming .lab{color:var(--mute);min-width:6.5em}
.steps{padding-left:22px}
.steps li{margin-bottom:10px}
.lecture{padding-block:22px;border-top:1px solid var(--rule)}
.lecture h2{margin-top:0}
.uline{display:block;width:min(420px,100%);height:18px;margin-top:6px}
.uline path{fill:none;stroke:var(--signal);stroke-width:2.5;stroke-dasharray:500;stroke-dashoffset:500;animation:draw 2.4s ease-in-out .4s forwards}
.bars rect.a{fill:#b9b8b0}
.bars rect.b{fill:var(--signal);transform-box:fill-box;transform-origin:left;animation:grow 2.2s ease-out .4s both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.words{border:1px dashed #b9b8b0;padding:18px 20px;margin:26px 0;font-size:1rem;color:var(--mute)}
@media (prefers-reduced-motion:reduce){.uline path{animation:none;stroke-dashoffset:0}.bars rect.b{animation:none}}
/* v7 fix: the HTML height attribute was stretching portraits on phones */
.author img,.by img{height:auto}
.by img{height:44px}
/* v8 training page: agenda chart */
.agenda .ax line{stroke:#151515;stroke-width:1}
.agenda text{font:400 11px var(--mono);fill:#151515}
.agenda .bar{fill:#9c9b94;transform-box:fill-box;transform-origin:left;animation:grow .7s ease-out both}
.agenda .bar.brk{fill:#d9d8d2}
.agenda .bar.sig{fill:var(--signal)}
@media (prefers-reduced-motion:reduce){.agenda .bar{animation:none}}
/* v9 editorial: "Idea" becomes "Act" in the title */
.swap .w{display:inline-block;position:relative}
.swap .w .old{position:absolute;right:0;top:0;white-space:nowrap}
.swap .old{color:var(--mute);animation:out 1.2s ease-in 1.2s forwards}
.swap .new{color:var(--signal);opacity:0;animation:in .9s ease-out 2.1s forwards}
@keyframes out{to{opacity:0;transform:translateY(-.25em);filter:blur(2px)}}
@keyframes in{from{opacity:0;transform:translateY(.25em)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.swap .old{display:none}.swap .new{opacity:1;animation:none}}