
:root{--paper:#f5f3ed;--ink:#242723;--muted:#797c73;--line:#d4d5cb;--orange:#b75432;--serif:'Yu Mincho','Hiragino Mincho ProN',serif;--sans:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.9 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--orange);outline-offset:5px}.container{max-width:1200px;padding:0 40px;margin:auto}.masthead{display:flex;justify-content:space-between;align-items:center;padding:34px 0 27px;border-bottom:1px solid var(--ink)}.brand{font:700 34px/1.5 var(--serif);letter-spacing:.08em;display:flex;align-items:center;gap:13px}.mark{width:28px;height:28px;border:1px solid var(--orange);border-radius:50%;position:relative;background:linear-gradient(90deg,transparent 49%,var(--orange) 50%)}.mark:after{content:'';position:absolute;inset:6px;border:1px solid var(--paper);border-radius:50%}.masthead nav{display:flex;gap:29px;font-size:12px}.masthead nav a:hover{color:var(--orange)}section{border-bottom:1px solid var(--line)}.greeting{padding:57px 0 54px;display:grid;grid-template-columns:minmax(0,1fr) 205px;gap:70px;align-items:center}.section-label{font-size:11px;color:var(--muted);letter-spacing:.12em;margin:0 0 18px;font-weight:400}.greeting #greeting-title{font:500 clamp(27px,2.6vw,34px)/1.9 var(--serif);margin:0 0 22px;letter-spacing:.035em}.greeting #greeting-title span{color:var(--orange)}.greeting p{font-size:13px;line-height:2.2;color:#656a60;max-width:700px;margin:12px 0}.greeting .note{font-size:11px;color:var(--muted);margin-top:20px}.signature{margin-top:16px;font:italic 16px var(--serif);color:#676c61}.year{color:var(--orange);border-left:1px solid var(--line);padding-left:30px;font-family:var(--serif);align-self:stretch;display:flex;flex-direction:column;justify-content:center}.year small{font:italic 26px/1.2 Baskerville,"Palatino Linotype","Book Antiqua",Georgia,serif;letter-spacing:.025em;color:var(--orange)}.year strong{font-family:Baskerville,"Palatino Linotype","Book Antiqua",Georgia,serif;font-size:70px;line-height:1.3;font-weight:400;letter-spacing:-.045em;text-align:center}.year span{font:10px var(--sans);letter-spacing:.12em;color:var(--muted)}.recommendations{padding:40px 0 44px}.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:23px;gap:20px}h2{font:500 24px/1.5 var(--serif);letter-spacing:.05em;margin:0}.section-head small{font-size:10px;color:var(--muted)}.pick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:21px}.pick-image{position:relative;aspect-ratio:1.62;overflow:hidden;background:#e5e5dc;margin-bottom:13px}.pick-image img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.72);transition:transform .25s,filter .25s}.pick:hover img{transform:scale(1.04);filter:saturate(1)}.pick-number{position:absolute;top:0;left:0;padding:2px 9px;background:var(--paper);font:italic 16px/1.8 var(--serif);color:var(--orange)}.pick time{font:10px Arial,sans-serif;letter-spacing:.06em;color:var(--muted)}.pick h3{font:500 16px/1.8 var(--serif);margin:8px 0 0}.pick:hover h3{color:var(--orange)}.index{padding:43px 0 0;border-bottom:0}.index .section-head{margin-bottom:20px}.index-labels{display:flex;gap:17px;align-items:baseline}.count{font-size:11px;color:var(--muted);font-family:var(--sans);font-weight:400;letter-spacing:0}.tabs{display:flex;gap:28px;border-bottom:1px solid var(--ink);overflow:auto;padding-top:4px}.tabs button{border:0;border-bottom:3px solid transparent;background:transparent;font-size:12px;white-space:nowrap;padding:11px 0 12px;cursor:pointer}.tabs button[aria-selected=true]{border-bottom-color:var(--orange);color:var(--orange)}.tabs button:hover{color:var(--orange)}.tabs button:focus-visible{outline-offset:-2px}.entries{list-style:none;padding:0;margin:0}.entry{display:grid;grid-template-columns:106px minmax(0,1fr) 104px;gap:22px;align-items:baseline;border-bottom:1px solid var(--line);padding:18px 0}.entry[hidden]{display:none}.entry time{font:11px/1.8 Arial,sans-serif;letter-spacing:.06em;color:var(--muted)}.entry>a{font-size:14px;line-height:1.9}.entry>a:hover{color:var(--orange);text-decoration:underline;text-underline-offset:4px}.entry-category{font-size:10px;color:#898d81;text-align:right}.footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--ink);padding:23px 0 30px;color:var(--muted);font-size:10px}.footer a{font-size:11px}.footer a:hover{color:var(--orange)}@media(max-width:950px){.container{padding:0 28px}.greeting{grid-template-columns:minmax(0,1fr) 150px;gap:30px}.year{padding-left:22px}.year strong{font-size:58px}.pick-grid{gap:15px}.pick h3{font-size:14px}.entry{gap:15px;grid-template-columns:95px minmax(0,1fr) 92px}}
@media(max-width:680px){.container{padding:0 22px}.masthead{padding:23px 0 20px;display:block}.brand{font-size:30px;gap:11px}.mark{width:25px;height:25px}.masthead nav{gap:24px;font-size:11px;margin-top:17px}.greeting{display:block;padding:33px 0}.section-label{font-size:10px;margin-bottom:15px}.greeting #greeting-title{font-size:27px;line-height:1.85;margin-bottom:17px;letter-spacing:0}.greeting p{font-size:12px;line-height:2.15}.greeting .note{font-size:10px}.year{display:none}.signature{font-size:15px}.recommendations{padding:30px 0}.section-head{margin-bottom:21px}h2{font-size:22px}.pick-grid{grid-template-columns:1fr;gap:0}.pick{display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:17px;grid-template-rows:auto 1fr;padding:16px 0;border-bottom:1px solid var(--line)}.pick:first-child{padding-top:0}.pick:last-child{padding-bottom:0;border-bottom:0}.pick-image{grid-row:1/3;margin:0;aspect-ratio:1.4}.pick-number{font-size:13px;padding:1px 7px}.pick time{font-size:9px;line-height:1.5;margin-top:2px}.pick h3{font-size:15px;line-height:1.7;margin-top:5px}.index{padding:32px 0 38px}.tabs{gap:23px}.tabs button{font-size:11px;padding-top:8px}.entry{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0}.entry time{font-size:10px}.entry>a{font-size:13px;line-height:1.9}.entry-category{display:none}.section-head small{font-size:9px}.count{font-size:10px}.footer{padding:20px 0;font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.entry{grid-template-columns:155px minmax(0,1fr);gap:25px;align-items:start;padding:25px 0}
.entry-thumb{display:block;width:155px;aspect-ratio:1.5;background:#e4e5dc;overflow:hidden}
.entry-thumb img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.8);transition:transform .25s}
.entry-thumb:hover img{transform:scale(1.04)}
.entry-meta{display:flex;gap:18px;align-items:baseline;margin-bottom:6px}
.entry-category{text-align:left;font-size:10px}
.entry-title{display:block;font:500 19px/1.8 var(--serif)}
.entry-title:hover{color:var(--orange)}
.entry-excerpt{font-size:12px;line-height:1.95;color:#787d71;margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:680px){.entry{grid-template-columns:100px minmax(0,1fr);gap:16px;padding:21px 0}.entry-thumb{width:100px;aspect-ratio:1.15}.entry-title{font-size:16px;line-height:1.75}.entry-meta{gap:10px;flex-wrap:wrap;margin-bottom:5px}.entry-category{display:inline;font-size:9px}.entry time{font-size:9px}.entry-excerpt{font-size:11px;line-height:1.8;margin-top:6px}}

/* Readable typography across desktop and mobile. */
body{font-size:16px}
.masthead nav{font-size:15px}
.section-label{font-size:14px}
.greeting #greeting-title{font-size:clamp(30px,3vw,40px)}
.greeting p{font-size:17px;line-height:2}
.greeting .note{font-size:14px}
.signature{font-size:19px}
.year span{font-size:13px;text-align:right}
h2{font-size:29px}
.section-head small,.count{font-size:14px}
.pick time{font-size:13px}
.pick h3{font-size:19px;line-height:1.75}
.tabs button{font-size:16px;min-height:48px}
.entry-title{font-size:23px;line-height:1.7}
.entry-excerpt{font-size:16px;line-height:1.9}
.entry time,.entry-category{font-size:13px}
.footer,.footer a{font-size:13px}
@media(min-width:681px) and (max-width:950px){
.pick-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
}
@media(max-width:680px){
.masthead nav{font-size:14px;gap:20px;flex-wrap:wrap}
.section-label{font-size:13px}
.greeting #greeting-title{font-size:27px}
.greeting p{font-size:16px;line-height:1.95}
.greeting .note{font-size:13px}
.signature{font-size:18px}
h2{font-size:26px}
.section-head small,.count{font-size:13px}
.section-head{flex-wrap:wrap;gap:8px}
.pick h3{font-size:18px}
.pick time{font-size:12px}
.tabs button{font-size:15px}
.entry{grid-template-columns:90px minmax(0,1fr);gap:14px}
.entry-thumb{width:90px}
.entry-title{font-size:19px}
.entry-excerpt{font-size:15px;line-height:1.85}
.entry time,.entry-category{font-size:12px}
.footer,.footer a{font-size:12px}
}
.site-title{margin:0;font:inherit}

.greeting-intro{display:flex;align-items:flex-start;gap:24px;margin-top:12px}.greeting-avatar{display:block;width:112px;height:112px;flex:0 0 112px;object-fit:contain;border-radius:50%}.greeting .greeting-intro p{margin:0;min-width:0;flex:1}
@media(max-width:680px){.greeting-intro{flex-direction:column;gap:16px}.greeting-avatar{width:96px;height:96px;flex-basis:auto}}

.greeting-author{flex:0 0 112px;width:112px;text-align:center}.greeting-author .signature{margin-top:6px;line-height:1.4}
@media(max-width:680px){.greeting-author{flex-basis:auto;width:96px;align-self:center}}

.footer .back-to-top{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));z-index:100;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font:26px/1 Arial,sans-serif;box-shadow:0 3px 12px rgba(36,39,35,.12);text-decoration:none}
.footer .back-to-top:hover{color:var(--orange);border-color:var(--orange)}
.footer{padding-right:65px}
@media(max-width:680px){.footer .back-to-top{right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));width:44px;height:44px;font-size:24px}}

.entries > .entry:last-child,.entries > .entry.last-visible{border-bottom:0}
.sort-switch{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;color:var(--muted)}
.sort-switch button{border:0;background:transparent;padding:10px 4px;min-height:44px;cursor:pointer;color:var(--muted);font:inherit}
.sort-switch button[aria-pressed="true"]{color:var(--orange);font-weight:700;text-decoration:underline;text-underline-offset:5px}
.sort-switch button:hover{color:var(--orange)}
