/*
Theme Name: Tadashi Otsuka Portfolio
Author: Tadashi Otsuka / Webil Inc.
Description: 白基調ミニマルの写真・映像ポートフォリオテーマ。トップはフルスクリーンのループ映像、実績はWorks（写真/映像）、お知らせはJournal（投稿）で管理。
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: tadashi-portfolio
*/

/* ============================================================
   DESIGN TOKENS — 白基調・無彩色のみ
   ============================================================ */
:root{
  --white:   #FFFFFF;
  --bg:      #FAFAFA;
  --ink:     #1A1A1A;
  --gray:    #767676;
  --line:    #E4E4E4;

  --sans-en: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --serif:   "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

body{
  font-family: var(--sans-ja);
  font-weight: 300;
  background: var(--white);
  color: var(--ink);
  line-height: 1.9;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
}

a{ color:inherit; text-decoration:none; }
img, video{ display:block; max-width:100%; height:auto; }
.wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

a:focus-visible, button:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:4px;
}

/* ============================================================
   FV — フルスクリーン・ループ映像（トップのみ）
   ============================================================ */
.fv{
  position:relative;
  height:100vh;
  height:100svh;
  overflow:hidden;
  background:#0E0E0E;
}
.fv video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;        /* ウィンドウサイズに合わせて自動トリミング */
  object-position:center;
}
.fv .video-placeholder{
  position:absolute; inset:0;
  background:
    radial-gradient(140% 100% at 75% 15%, #3d4654 0%, transparent 60%),
    linear-gradient(170deg, #1b2027 0%, #2b333d 45%, #161a1f 100%);
}
.fv .video-placeholder span{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--sans-en);
  font-size:0.65rem;
  letter-spacing:0.25em;
  color:rgba(255,255,255,0.35);
  white-space:nowrap;
}
.fv::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 26%);
  pointer-events:none;
}
.fv-ui{ position:absolute; inset:0; z-index:2; color:#fff; }
.fv-name{
  position:absolute; top:34px; left:36px;
  font-family:var(--sans-en);
  font-weight:500;
  font-size:1rem;
  letter-spacing:0.06em;
}
.fv-name small{
  display:block;
  font-family:var(--sans-ja);
  font-weight:300;
  font-size:0.62rem;
  letter-spacing:0.28em;
  opacity:0.85;
  margin-top:2px;
}
.fv-nav{ position:absolute; top:38px; right:36px; text-align:right; }
.fv-nav ul{ list-style:none; }
.fv-nav li{ line-height:2.1; }
.fv-nav a{
  font-family:var(--sans-en);
  font-weight:400;
  font-size:0.82rem;
  letter-spacing:0.05em;
  opacity:0.92;
  transition:opacity .25s ease;
}
.fv-nav a:hover{ opacity:0.55; }
.fv-scroll{
  position:absolute; bottom:30px; left:36px;
  font-family:var(--sans-en);
  font-size:0.62rem;
  letter-spacing:0.22em;
  color:rgba(255,255,255,0.75);
}
@media (max-width:640px){
  .fv-name{ top:24px; left:20px; }
  .fv-nav{ top:26px; right:20px; }
  .fv-scroll{ left:20px; }
}

/* ============================================================
   下層ページ用のスリムヘッダー
   ============================================================ */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--white);
}
.site-header .inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.site-header .name{
  font-family:var(--sans-en);
  font-weight:500;
  font-size:0.95rem;
  letter-spacing:0.06em;
}
.site-header nav ul{ display:flex; gap:26px; list-style:none; }
.site-header nav a{
  font-family:var(--sans-en);
  font-size:0.76rem;
  letter-spacing:0.05em;
  color:var(--gray);
  transition:color .25s ease;
}
.site-header nav a:hover{ color:var(--ink); }
@media (max-width:640px){
  .site-header nav li:nth-child(n+4){ display:none; }
}

/* ============================================================
   STATEMENT
   ============================================================ */
.statement{ padding:150px 0 130px; text-align:center; }
.statement-lead{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.35rem, 2.6vw, 1.85rem);
  line-height:2.2;
  letter-spacing:0.12em;
}
.statement-body{
  font-family:var(--serif);
  font-weight:500;
  font-size:0.92rem;
  line-height:2.6;
  letter-spacing:0.1em;
  margin-top:44px;
  color:var(--ink);
}

/* ============================================================
   SECTION COMMON
   ============================================================ */
section{ padding:110px 0; }
.sec-label{
  font-family:var(--sans-en);
  font-weight:400;
  font-size:0.78rem;
  letter-spacing:0.08em;
  margin-bottom:8px;
}
.sec-label .ja{
  font-family:var(--sans-ja);
  font-weight:300;
  color:var(--gray);
  font-size:0.72rem;
  margin-left:14px;
  letter-spacing:0.14em;
}
.sec-rule{
  border:none;
  border-top:1px solid var(--line);
  margin:18px 0 54px;
}

/* ============================================================
   WORKS — PHOTOGRAPHY / FILM
   ============================================================ */
#works{ padding-top:120px; }
.works-block + .works-block{ margin-top:96px; }
.grid-photo{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.grid-film{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:920px){
  .grid-photo{ grid-template-columns:repeat(3,1fr); }
  .grid-film{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .grid-photo{ grid-template-columns:repeat(2,1fr); }
  .grid-film{ grid-template-columns:1fr; }
}
.work{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--bg);
}
.grid-photo .work{ aspect-ratio:3/2; }
.grid-film  .work{ aspect-ratio:16/9; }
.work .ph{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transition:opacity .35s ease;
}
.work:hover .ph{ opacity:0.82; }
.work .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 14px 12px;
  font-size:0.72rem;
  letter-spacing:0.06em;
  color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,0.45), transparent);
  opacity:0;
  transition:opacity .35s ease;
}
.work:hover .cap, .work:focus-visible .cap{ opacity:1; }
.work .cap small{
  display:block;
  font-family:var(--sans-en);
  font-size:0.58rem;
  letter-spacing:0.14em;
  opacity:0.8;
}
.more-link{
  display:inline-block;
  margin-top:34px;
  font-family:var(--sans-en);
  font-size:0.78rem;
  letter-spacing:0.06em;
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
  transition:opacity .25s ease;
}
.more-link:hover{ opacity:0.5; }
.works-empty{
  font-size:0.8rem;
  color:var(--gray);
  padding:30px 0;
}

/* ============================================================
   ABOUT
   ============================================================ */
#about{ background:var(--bg); }
.about-grid{
  display:grid;
  grid-template-columns:minmax(220px,300px) 1fr;
  gap:64px;
  align-items:start;
}
.about-photo{
  aspect-ratio:3/4;
  background:#DCDCDC center/cover no-repeat;
}
.about-text h3{
  font-weight:500;
  font-size:1.1rem;
  letter-spacing:0.1em;
  margin-bottom:4px;
}
.about-text .en-name{
  font-family:var(--sans-en);
  font-size:0.74rem;
  letter-spacing:0.12em;
  color:var(--gray);
  display:block;
  margin-bottom:30px;
}
.about-text p{
  font-size:0.86rem;
  margin-bottom:18px;
  max-width:38em;
}
.about-fact{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:4px 28px;
  margin-top:36px;
  font-size:0.8rem;
  border-top:1px solid var(--line);
  padding-top:24px;
}
.about-fact dt{
  font-family:var(--sans-en);
  font-size:0.64rem;
  letter-spacing:0.14em;
  color:var(--gray);
  padding-top:5px;
}
@media (max-width:760px){
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .about-photo{ max-width:280px; }
}

/* ============================================================
   COMMISSION
   ============================================================ */
.commission-intro{
  font-size:0.86rem;
  max-width:40em;
  margin-bottom:54px;
}
.svc-list{ list-style:none; }
.svc-list li{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:28px;
  padding:28px 4px;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.svc-list li:first-child{ border-top:1px solid var(--line); }
.svc-list h3{
  font-weight:500;
  font-size:0.9rem;
  letter-spacing:0.06em;
}
.svc-list h3 small{
  display:block;
  font-family:var(--sans-en);
  font-weight:400;
  font-size:0.62rem;
  letter-spacing:0.14em;
  color:var(--gray);
  margin-bottom:2px;
}
.svc-list p{
  font-size:0.8rem;
  color:var(--gray);
}
@media (max-width:760px){
  .svc-list li{ grid-template-columns:1fr; gap:8px; }
}

/* ============================================================
   JOURNAL
   ============================================================ */
#journal{ background:var(--bg); }
.news-list{ list-style:none; }
.news-list li{
  display:grid;
  grid-template-columns:120px 90px 1fr;
  gap:28px;
  align-items:baseline;
  padding:18px 4px;
  border-bottom:1px solid var(--line);
}
.news-list li:first-child{ border-top:1px solid var(--line); }
.news-list a:hover .news-title{ opacity:0.55; }
.news-date{
  font-family:var(--sans-en);
  font-size:0.7rem;
  letter-spacing:0.08em;
  color:var(--gray);
}
.news-cat{
  font-family:var(--sans-en);
  font-size:0.62rem;
  letter-spacing:0.12em;
  color:var(--gray);
}
.news-title{ font-size:0.85rem; transition:opacity .25s ease; }
@media (max-width:640px){
  .news-list li{ grid-template-columns:1fr; gap:2px; padding:16px 4px; }
}

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
#contact p{
  font-size:0.86rem;
  color:var(--gray);
  margin-bottom:36px;
  max-width:40em;
}
.btn{
  display:inline-block;
  font-family:var(--sans-en);
  font-size:0.78rem;
  letter-spacing:0.08em;
  border:1px solid var(--ink);
  padding:14px 44px;
  background:transparent;
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.btn:hover{ background:var(--ink); color:var(--white); }

footer.site-footer{
  border-top:1px solid var(--line);
  padding:30px 0 40px;
  font-family:var(--sans-en);
  font-size:0.62rem;
  letter-spacing:0.14em;
  color:var(--gray);
}
.footer-inner{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ============================================================
   下層：記事・固定ページ共通
   ============================================================ */
.entry-wrap{
  max-width:880px;
  margin:0 auto;
  padding:90px 32px 110px;
}
@media (max-width:640px){ .entry-wrap{ padding:60px 20px 80px; } }
.entry-meta{
  font-family:var(--sans-en);
  font-size:0.68rem;
  letter-spacing:0.14em;
  color:var(--gray);
  margin-bottom:14px;
}
.entry-title{
  font-weight:500;
  font-size:1.4rem;
  letter-spacing:0.08em;
  line-height:1.8;
  margin-bottom:40px;
}
.entry-thumb{ margin-bottom:48px; }
.entry-content p{
  font-size:0.9rem;
  margin-bottom:1.8em;
}
.entry-content h2{
  font-weight:500;
  font-size:1.05rem;
  letter-spacing:0.08em;
  margin:2.6em 0 1em;
}
.entry-content h3{
  font-weight:500;
  font-size:0.95rem;
  margin:2.2em 0 0.9em;
}
.entry-content img{ margin:2.4em 0; }
.entry-content figure{ margin:2.4em 0; }
.entry-content figure img{ margin:0; }
.entry-content figcaption{
  font-size:0.7rem;
  color:var(--gray);
  margin-top:10px;
  letter-spacing:0.06em;
}
.entry-content ul, .entry-content ol{
  margin:0 0 1.8em 1.4em;
  font-size:0.9rem;
}
.entry-content a{
  border-bottom:1px solid var(--ink);
}
.entry-content .wp-block-embed{ margin:2.4em 0; }
.entry-content iframe{ max-width:100%; }
.back-link{
  display:inline-block;
  margin-top:56px;
  font-family:var(--sans-en);
  font-size:0.76rem;
  letter-spacing:0.08em;
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
}

/* アーカイブ（Works一覧） */
.archive-wrap{ padding:90px 0 110px; }
.archive-head{ margin-bottom:8px; }
.pagination{
  margin-top:60px;
  font-family:var(--sans-en);
  font-size:0.78rem;
  letter-spacing:0.08em;
}
.pagination .page-numbers{
  display:inline-block;
  padding:6px 12px;
  margin-right:6px;
  border:1px solid var(--line);
}
.pagination .page-numbers.current{
  border-color:var(--ink);
}

/* ============================================================
   Contact Form 7 をデザインに合わせる
   ============================================================ */
.wpcf7 form{ max-width:560px; }
.wpcf7 label{
  display:block;
  font-size:0.78rem;
  letter-spacing:0.08em;
  margin-bottom:26px;
  color:var(--ink);
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea{
  display:block;
  width:100%;
  margin-top:8px;
  padding:12px 14px;
  font-family:var(--sans-ja);
  font-size:0.88rem;
  border:1px solid var(--line);
  background:var(--white);
  border-radius:0;
}
.wpcf7 input:focus, .wpcf7 textarea:focus{
  outline:none;
  border-color:var(--ink);
}
.wpcf7 .wpcf7-submit{
  font-family:var(--sans-en);
  font-size:0.78rem;
  letter-spacing:0.08em;
  border:1px solid var(--ink);
  padding:14px 44px;
  background:transparent;
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.wpcf7 .wpcf7-submit:hover{ background:var(--ink); color:var(--white); }
.wpcf7 .wpcf7-response-output{
  border:1px solid var(--line) !important;
  padding:14px 16px !important;
  margin:24px 0 0 !important;
  font-size:0.8rem;
}

/* WordPress標準クラスの最低限対応 */
.alignleft{ float:left; margin:0 1.5em 1em 0; }
.alignright{ float:right; margin:0 0 1em 1.5em; }
.aligncenter{ display:block; margin:0 auto; }
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute;
}