/* /learning: a blog of 2009, in tea's colours.
   Approved by the client on 05/10/2026 from docs/mock-learning-2009.html,
   with two changes: no calendar box around the date (the type alone does
   it), and the feed link at the bottom of the sidebar.
   The tokens are the ones of landing/shared.css and src/theme.css, light
   and dark, so the blog is the same site as the product. */
:root{
  --page:#e7e7ea; --sheet:#fcfcfd; --panel:#f4f4f6; --line:#e0e0e4; --line-2:#d5d5da;
  --ink:#27272c; --muted:#6b6b75; --faint:#9d9da7;
  --brand:#c2714f; --link:#a25a3a; --veil:rgba(194,113,79,.07);
  --yes:#2aa188; --no:#8f2f6b;
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Lucida Grande","Lucida Sans Unicode",Verdana,-apple-system,BlinkMacSystemFont,sans-serif;
  --mark:"Avenir Next",Futura,"Century Gothic","Nunito Sans",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --page:#151517; --sheet:#1c1c1f; --panel:#232326; --line:#34343a; --line-2:#45454d;
    --ink:#ededf0; --muted:#adadb5; --faint:#7e7e87;
    --brand:#d98a63; --link:#e8a37e; --veil:rgba(217,138,99,.08);
    --yes:#2f9c7d; --no:#d461ac;
    color-scheme:dark;
  }
}
html[data-theme="dark"]{
  --page:#151517; --sheet:#1c1c1f; --panel:#232326; --line:#34343a; --line-2:#45454d;
  --ink:#ededf0; --muted:#adadb5; --faint:#7e7e87;
  --brand:#d98a63; --link:#e8a37e; --veil:rgba(217,138,99,.08);
  --yes:#2f9c7d; --no:#d461ac;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{background:var(--page); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--page); color:var(--ink); font:13px/1.65 var(--sans); -webkit-font-smoothing:antialiased}
a{color:var(--link)} a:hover{color:var(--ink)}
a:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:3px}
img{max-width:100%; height:auto; display:block}
.screen-reader{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

#wrapper{max-width:980px; margin:28px auto 40px; background:var(--sheet); border:1px solid var(--line-2); box-shadow:0 1px 3px rgba(0,0,0,.06)}
#header{padding:30px 34px 22px; border-bottom:1px solid var(--line)}
#header .site{display:inline-flex; align-items:baseline; gap:12px; text-decoration:none; color:var(--ink)}
#header .logo{display:inline-flex; align-items:baseline; font:600 40px/1 var(--mark); letter-spacing:.02em}
#header .logo svg{display:block; margin-right:.045em; overflow:visible}
#header .logo .cell{fill:currentColor} #header .logo .cell.hot{fill:var(--brand)}
#header .name{font:italic 26px/1 var(--serif)}
#header .tagline{margin:8px 0 0; font:italic 14px var(--serif); color:var(--muted)}
#nav{display:flex; flex-wrap:wrap; background:var(--panel); border-bottom:1px solid var(--line); padding:0 26px}
#nav a{padding:10px 12px; text-decoration:none; color:var(--muted); font-size:12px; font-weight:bold; text-transform:uppercase; letter-spacing:.06em; border-bottom:2px solid transparent; margin-bottom:-1px}
#nav a.on, #nav a:hover{color:var(--ink); border-bottom-color:var(--brand)}
#nav .right{margin-left:auto}

#body{display:grid; grid-template-columns:230px minmax(0,1fr)}
.sidebar{padding:26px 22px 30px 26px; border-right:1px solid var(--line); background:var(--veil)}
.widget{margin:0 0 26px}
.widget:last-child{margin:0}
.widget h4{margin:0 0 8px; padding:0 0 5px; font:bold 11px var(--sans); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); border-bottom:1px dotted var(--line-2)}
.widget ul{margin:0; padding:0; list-style:none}
.widget li{padding:3px 0 3px 12px; position:relative; font-size:12px; line-height:1.45}
.widget li::before{content:"\00bb"; position:absolute; left:0; color:var(--faint)}
.widget li small{color:var(--faint)}
.widget a{text-decoration:none} .widget a:hover{text-decoration:underline}
.widget.about p{margin:0; font-size:12px; color:var(--muted)}
.rss{padding-top:14px; border-top:1px dotted var(--line-2)}
.rss a{display:inline-flex; align-items:center; gap:7px; font-weight:bold; font-size:12px}
.feed-icon{flex:none; width:14px; height:14px; border-radius:3px; background:#f26522 radial-gradient(circle at 25% 75%, #fff 1.6px, transparent 2px); position:relative; overflow:hidden}
.feed-icon::before,.feed-icon::after{content:""; position:absolute; left:-9px; bottom:-9px; border-radius:50%; border:2px solid #fff; border-left-color:transparent; border-bottom-color:transparent}
.feed-icon::before{width:15px; height:15px} .feed-icon::after{width:23px; height:23px}

#content{padding:26px 34px 30px; min-width:0}
.entry{display:grid; grid-template-columns:54px minmax(0,1fr); gap:0 16px; padding:0 0 26px; margin:0 0 26px; border-bottom:1px solid var(--line)}
.hentry > .entry{border:0; padding:0; margin:0 0 18px}
/* The date: no box, just the type. */
.date{display:flex; align-items:flex-start; gap:5px; padding-top:1px}
.date .d{font:34px/.9 var(--serif); color:var(--ink); letter-spacing:-.02em}
.date .my{font:bold 9.5px/1.25 var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--faint); padding-top:2px}
.entry-title{margin:0; font:normal 24px/1.2 var(--serif); letter-spacing:-.005em}
.hentry .entry-title{font-size:30px}
.entry-title a{color:var(--ink); text-decoration:none} .entry-title a:hover{color:var(--link)}
.byline{margin:6px 0 0; font-size:11px; color:var(--faint)}
.byline a{color:var(--muted)}
.v{font-weight:bold; white-space:nowrap} .v::before{content:"\25CF\00a0"} .v.yes{color:var(--yes)} .v.no{color:var(--no)}
.entry-content{margin:12px 0 0; font-size:13.5px}
.entry-content p{margin:0 0 12px}
.thumb{float:right; width:46%; height:auto; margin:2px 0 10px 16px; border:1px solid var(--line-2); padding:3px; background:var(--sheet)}
.more a{font-weight:bold; text-decoration:none}
.filed{clear:both; margin:10px 0 0; padding:6px 10px; background:var(--panel); font-size:11px; color:var(--faint)}
.pager{font-weight:bold; font-size:13px}

.page-title{margin:0 0 18px; padding:0 0 14px; border-bottom:1px solid var(--line)}
.page-title .kicker{margin:0; font:bold 11px var(--sans); text-transform:uppercase; letter-spacing:.1em; color:var(--faint)}
.page-title h1{margin:4px 0 0; font:normal 28px/1.2 var(--serif)}
.intro{margin:0 0 26px; font:14.5px/1.7 var(--serif); color:var(--muted)}
.intro p{margin:0 0 10px}
.catlist{margin:0}
.catlist dt{margin:16px 0 2px; font:19px var(--serif)}
.catlist dt a{text-decoration:none} .catlist dt a:hover{text-decoration:underline}
.catlist dt small{font:12px var(--sans); color:var(--faint)}
.catlist dd{margin:0; color:var(--muted); font-size:13px}
.month{margin:26px 0 8px; font:bold 12px var(--sans); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); border-bottom:1px dotted var(--line-2); padding-bottom:5px}
.month:first-of-type{margin-top:0}
.archive{margin:0; padding:0; list-style:none}
.archive li{display:grid; grid-template-columns:54px 1fr; gap:10px; padding:4px 0; font-size:13px}
.archive .when{color:var(--faint); font-variant-numeric:tabular-nums}
.archive small{grid-column:2; color:var(--faint); margin-top:-3px}

.post{font:15px/1.75 var(--serif)}
.post p{margin:0 0 16px}
.post h2{margin:28px 0 8px; font:bold 13px var(--sans); text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.post h3{margin:22px 0 6px; font:bold 15px var(--serif)}
.post ul, .post ol{margin:0 0 16px; padding-left:22px}
.post li{margin:4px 0}
.post blockquote{margin:0 0 16px; padding:2px 0 2px 16px; border-left:3px solid var(--line-2); color:var(--muted); font-style:italic}
.post code{font:.86em ui-monospace,Menlo,monospace; background:var(--panel); padding:1px 5px}
.post .lede{font-size:17px; font-style:italic; color:var(--muted)}
.post figure{margin:0}
.post figure img{border:1px solid var(--line-2); padding:4px; background:var(--sheet)}
.post figure.alignleft{float:left; width:44%; margin:4px 22px 12px 0}
.post figure.wide{clear:both; margin:22px 0}
.post figcaption{margin:6px 0 0; font:italic 12px/1.5 var(--serif); color:var(--faint); text-align:center}
.post figcaption a{color:var(--muted)}
.postmeta{clear:both; margin:22px 0 0; padding:10px 12px; background:var(--panel); border:1px dotted var(--line-2); font:11.5px/1.6 var(--sans); color:var(--muted)}
.thread-box{margin:18px 0 0; border:1px solid var(--line-2); font-family:var(--sans)}
.thread-box h4{margin:0; padding:7px 12px; background:var(--panel); font:bold 11px var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.thread-box ol{margin:0; padding:10px 14px 10px 34px; font-size:12px; line-height:1.5}
.thread-box li{padding:2px 0; margin:0} .thread-box li.on{font-weight:bold}
.thread-box li small{color:var(--faint)}
.navlinks{display:flex; justify-content:space-between; gap:20px; margin:18px 0 0; font:12px/1.5 var(--sans)}
.navlinks .r{text-align:right}
.related h4{margin:24px 0 6px; font:bold 11px var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.related ul{margin:0; padding-left:18px; font:12.5px/1.6 var(--sans)}
.related small{color:var(--faint)}

#footer{display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:space-between; border-top:1px solid var(--line); padding:14px 34px; font-size:11px; color:var(--faint); background:var(--panel)}
#footer a{color:var(--muted)}

@media (max-width:760px){
  #wrapper{margin:0; border:0; box-shadow:none}
  #body{grid-template-columns:minmax(0,1fr)}
  .sidebar{order:2; border-right:0; border-top:1px solid var(--line); padding:22px 16px}
  #content{padding:20px 16px}
  #header{padding:22px 16px 16px} #nav{padding:0 6px} #nav a{padding:10px 8px}
  #footer{padding:14px 16px}
  .entry{grid-template-columns:44px minmax(0,1fr); gap:0 12px}
  .date{flex-direction:column; gap:2px}
  .thumb, .post figure.alignleft{float:none; width:100%; margin:0 0 12px}
  .hentry .entry-title{font-size:25px}
}