:root{
  --bg:#f4f1ea;
  --ink:#121212;
  --muted:#6c6860;
  --line:#d6d0c4;
  --paper:#fbfaf6;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.7}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:20px max(24px,calc((100vw - var(--max))/2));background:rgba(244,241,234,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-family:Georgia,"Times New Roman",serif;font-size:25px;letter-spacing:.12em;font-weight:700}
.nav{display:flex;gap:24px;align-items:center;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.nav-en{border:1px solid var(--ink);padding:5px 9px}
main{max-width:var(--max);margin:0 auto;padding:0 24px}
.hero{min-height:74vh;display:flex;flex-direction:column;justify-content:center;padding:70px 0 80px;border-bottom:1px solid var(--line)}
.hero-jp{min-height:48vh;padding:60px 0 30px}
.hero-en{min-height:48vh;padding:60px 0 30px}
.kicker,.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:700}
.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(56px,10vw,145px);line-height:.9;letter-spacing:-.055em;margin:18px 0 16px;font-weight:400}
.hero h1 .name-first,.hero h1 .name-last{display:inline}
.hero h1 .name-first::after{content:" "}
.hero-role{font-size:clamp(22px,3vw,38px);margin:0 0 20px;font-family:Georgia,"Times New Roman",serif;font-style:italic}
.hero-copy{max-width:650px;font-size:18px;color:#37342f;margin:0 0 30px}
.hero-note-link{display:inline-block;width:max-content;font-size:14px;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.hero-note-link:hover{text-decoration-color:var(--ink)}
.hero-links{display:flex;flex-wrap:wrap;gap:6px 28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.button{display:inline-block;border:1px solid var(--ink);padding:11px 16px;font-size:14px}
.button.primary{background:var(--ink);color:var(--paper)}
.section{padding:92px 0;border-bottom:1px solid var(--line)}
.works-section{padding-top:42px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px}
.section h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,5vw,64px);line-height:1;margin:8px 0 0;font-weight:400;letter-spacing:-.03em}
.text-link,.more-link{font-size:14px}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.article-card{background:var(--paper);border:1px solid var(--line);padding:24px;min-height:270px;display:flex;flex-direction:column}
.article-card .date{font-size:12px;color:var(--muted);margin-bottom:28px}
.article-card h3{font-family:Georgia,"Times New Roman",serif;font-size:25px;line-height:1.35;margin:0 0 16px;font-weight:400}
.article-card p{font-size:14px;color:#4d4942;margin:0 0 24px}
.article-card .read{margin-top:auto;font-size:13px;font-weight:700}
.loading-card{grid-column:1/-1;min-height:auto;color:var(--muted)}
.works-list{border-top:1px solid var(--ink)}
.work-row{display:grid;grid-template-columns:90px 1fr auto;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}
.work-year{font-size:12px;color:var(--muted)}
.work-row h3{font-family:Georgia,"Times New Roman",serif;font-size:28px;line-height:1.25;margin:0 0 6px;font-weight:400}

/* Make linked work/book titles visibly clickable without changing the overall hierarchy. */
.work-row h3 a{
  text-decoration:underline;
  text-decoration-color:#aaa49a;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
.work-row h3 a:hover{
  text-decoration-color:var(--ink);
}
.work-row p,.work-note{margin:0;color:var(--muted);font-size:14px}
.work-row-group{align-items:start}
.work-links{margin:16px 0 0;padding-left:1.25em;display:grid;gap:10px}
.work-links li{font-size:15px;line-height:1.58;color:#37342f;padding-left:3px}
.work-links a{text-decoration:underline;text-decoration-color:#8d887f;text-decoration-thickness:1px;text-underline-offset:3px}
.work-links a:hover{text-decoration-color:var(--ink)}
.more-link{margin-top:24px}
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}
.about-title h2{font-size:clamp(52px,7vw,90px)}
.about-copy{padding-top:34px;max-width:680px}
.about-copy .lead{font-family:Georgia,"Times New Roman",serif;font-size:27px;line-height:1.55;margin-top:0}
.about-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:28px;font-size:14px}
.contact{padding-bottom:110px}
.contact p{max-width:720px}
.email{display:inline-block;font-family:Georgia,"Times New Roman",serif;font-size:clamp(26px,4vw,50px);margin-top:20px;border-bottom:1px solid var(--ink)}
.contact-note{margin-top:20px;color:var(--muted);font-size:14px}
.footer{max-width:var(--max);margin:0 auto;padding:28px 24px 44px;display:flex;justify-content:space-between;color:var(--muted);font-size:11px;letter-spacing:.09em}

.hero-media{
  margin:40px 0 0;
  width:100%;
  aspect-ratio:2.10/1;
  overflow:hidden;
}
.hero-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

@media(max-width:800px){
  .nav a:not(.nav-en){display:none}
  .hero{min-height:68vh}
  .hero-jp{min-height:46vh;padding:44px 0 26px}
  .hero-en{min-height:46vh;padding:44px 0 26px}
  .hero-media{margin-top:28px;aspect-ratio:2.10/1}
  .hero-jp .hero-copy{font-size:16.5px;line-height:1.28}
  /* Mobile name: fixed two-line layout with only a small optical gap. */
  .hero h1{font-size:clamp(52px,7vw,90px);line-height:1;letter-spacing:-.03em;display:flex;flex-direction:column;gap:.08em}
  .hero h1 .name-first,.hero h1 .name-last{display:block;line-height:1;margin:0;padding:0}
  .hero h1 .name-first::after{content:""}
  .works-section{padding-top:40px}
  .article-grid{grid-template-columns:1fr}
  .work-row{grid-template-columns:60px 1fr}
  .work-row>a,.work-note{grid-column:2}
  .about{grid-template-columns:1fr;gap:18px}
  .about-copy{padding-top:0}
  .about-copy .lead{font-size:21px;line-height:1.65}
  .section{padding:64px 0}
  .section-head{align-items:start;flex-direction:column}
  .footer{flex-direction:column;gap:6px}
}


/* Football books: compact extension of the existing works-list design. */
.books-section{padding-top:72px}
.book-group + .book-group{margin-top:52px}
.book-group-title{font-family:Georgia,"Times New Roman",serif;font-size:28px;line-height:1.2;margin:0 0 16px;font-weight:400;letter-spacing:-.02em}
.book-group-head{display:flex;align-items:flex-end;gap:28px;margin:0 0 16px}
.book-group-head .book-group-title{margin:0}
.book-group-cover{display:block;line-height:0}
.book-group-cover img{height:200px;width:auto;display:block;box-shadow:0 1px 4px rgba(0,0,0,.18)}
@media (max-width:800px){.book-group-cover{display:none}}
.book-list .work-row{padding:20px 0}
.book-list .work-row h3{font-size:22px;margin-bottom:5px}
.book-role{color:var(--ink);font-weight:400}
.book-by{color:var(--ink)!important;font-weight:400;margin-bottom:2px!important}
@media(max-width:800px){
  .books-section{padding-top:58px}
  .book-group + .book-group{margin-top:42px}
  .book-group-title{font-size:24px}
  .book-list .work-row h3{font-size:20px}
}

.book-by strong{font-weight:400}


/* Selected archive cards: 3-up football grid, 2-up secondary grid. */
.archive-section{padding-top:76px}
.archive-grid{display:grid;gap:22px}
.archive-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.archive-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px}
.archive-card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.archive-image{display:block;aspect-ratio:4/3;background:#ebe7dd;overflow:hidden;border-bottom:1px solid var(--line)}
.archive-image img{width:100%;height:100%;display:block;object-fit:cover}
.archive-card>p,.archive-card>h3,.archive-card>.archive-link,.archive-card>.archive-note{margin-left:20px;margin-right:20px}
.archive-meta{font-size:10px;line-height:1.45;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-top:18px!important;margin-bottom:10px!important}
.archive-card h3{font-family:Georgia,"Times New Roman",serif;font-size:23px;line-height:1.3;font-weight:400;margin-top:0;margin-bottom:12px}
.archive-card>p:not(.archive-meta){font-size:13px;line-height:1.65;color:#4d4942;margin-top:0;margin-bottom:20px}
.archive-link,.archive-note{font-size:12px;font-weight:700;margin-top:auto;margin-bottom:20px}
.archive-link{text-decoration:underline;text-decoration-color:#aaa49a;text-underline-offset:4px}
.archive-link:hover{text-decoration-color:var(--ink)}
.archive-note{color:var(--muted);font-weight:400}
.archive-secondary{padding-top:70px}
@media(max-width:900px){
  .archive-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .archive-grid-3,.archive-grid-2{grid-template-columns:1fr;max-width:none}
  .archive-card h3{font-size:21px}
  .archive-section{padding-top:58px}
}


.football-writing-head{align-items:flex-start}
.football-writing-head .section-deck{
  margin:14px 0 0;
  max-width:760px;
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
}
.football-writing-head-jp .section-deck{
  margin-top:0;
}

/* Compact jacket image for the 2003 Football Music project. */
.cd-project-content{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}
.cd-cover-link{
  flex:0 0 92px;
  display:block;
}
.cd-cover{
  display:block;
  width:92px;
  height:92px;
  object-fit:cover;
  border:1px solid var(--line);
}
@media(max-width:650px){
  .cd-project-content{align-items:flex-start;gap:14px}
  .cd-cover-link{flex-basis:76px}
  .cd-cover{width:76px;height:76px}
}

/* Featured recent-work row with magazine cover. */
.work-row-featured{
  grid-template-columns:90px minmax(0,1fr) 300px;
  align-items:start;
}
.work-featured-copy{min-width:0}
.work-cover-link{
  display:block;
  width:300px;
  justify-self:end;
}
.work-cover{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
  background:var(--paper);
}
@media(max-width:800px){
  .work-row-featured{grid-template-columns:60px minmax(0,1fr)}
  .work-row-featured .work-cover-link{
    grid-column:2;
    width:160px;
    justify-self:start;
    margin-top:14px;
  }
}