/*
Theme Name: XXX Design Office
Theme URI: https://example.com
Author: xxx Design Office, Inc.
Author URI: https://example.com
Description: sanundo thema。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xxxdesign
*/

:root{
  --white:#FFFFFF;
  --off:#F5F5F3;
  --black:#111111;
  --grey:#6E6E6E;
  --grey-light:#ADADA9;
  --red:#D8341C;
  --line:#E2E2DF;
  --sans:'Inter','Noto Sans JP',sans-serif;
  --serif:'Shippori Mincho',serif;
  --mono:'JetBrains Mono',monospace;
  --pad: clamp(20px, 4.4vw, 88px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
body{
  background:var(--white);
  color:var(--black);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  width:100%;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* fluid full-bleed grid, no centered fixed-width container */
.g{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:clamp(14px, 1.6vw, 28px);
  padding-inline:var(--pad);
  width:100%;
}
@media(max-width:900px){ .g{grid-template-columns:repeat(4,1fr);} }

.grid-guide{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  display:grid; grid-template-columns:repeat(12,1fr); gap:0;
  padding-inline:var(--pad);
}
@media(max-width:900px){ .grid-guide{grid-template-columns:repeat(4,1fr);} }
.grid-guide div{border-left:1px solid rgba(17,17,17,0.04);}
.grid-guide div:last-child{border-right:1px solid rgba(17,17,17,0.04);}
.ruler{
  position:fixed; left:10px; top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.15em; color:var(--grey-light); font-weight:400;
  z-index:2; display:flex; align-items:center; gap:10px;
}
@media(max-width:960px){ .ruler{display:none;} }

header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(4px);
  border-bottom:1px solid var(--line);
}
header.site-header .g{ align-items:center; height:70px; }
.logo{ grid-column:1 / 6; font-family:var(--serif); font-size:15px; font-weight:500; letter-spacing:0.01em; display:flex; align-items:baseline; gap:10px; }
.logo a{ display:flex; align-items:baseline; gap:10px; }
.logo .corp{ font-family:var(--mono); font-size:10px; font-weight:400; color:var(--grey); letter-spacing:0.04em; }
.primary-nav{ grid-column:8 / 13; display:flex; justify-content:flex-end; }
.primary-nav ul{ list-style:none; display:flex; gap:32px; }
.primary-nav a{ font-family:var(--mono); font-size:11px; color:var(--grey); font-weight:400; display:flex; gap:8px; align-items:center; transition:color 0.15s linear; }
.primary-nav a:hover{ color:var(--red); }
@media(max-width:900px){ .primary-nav{display:none;} .logo{grid-column:1/5;} }

section{ position:relative; z-index:3; }

/* ---- hero: asymmetric, not centered ---- */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:70px; }
.hero-top{ grid-column:1 / 13; display:flex; justify-content:space-between; border-top:1px solid var(--black); padding-top:14px; margin-bottom:clamp(40px,7vw,88px); gap:24px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; color:var(--grey); font-weight:400; }
.hero-top .tag{ color:var(--red); }
.hero h1{
  grid-column:1 / 9;
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:0.01em;
  font-size:clamp(36px, 5.8vw, 88px);
  line-height:1.32;
}
@media(max-width:900px){ .hero h1{grid-column:1/5;} }
.hero h1 em{ font-style:normal; color:var(--red); font-weight:500; }
.hero-side{ grid-column:9 / 13; display:flex; flex-direction:column; gap:32px; align-self:start; }
@media(max-width:900px){ .hero-side{grid-column:1/5; margin-top:40px; flex-direction:row; flex-wrap:wrap;} }
.hero-side .label{ font-family:var(--mono); font-size:10px; color:var(--grey-light); margin-bottom:8px; display:block; letter-spacing:0.04em; font-weight:400; }
.hero-side p{ font-size:13.5px; color:var(--grey); font-weight:400; max-width:34ch; }
.scroll-cue{ grid-column:1/13; margin-top:clamp(40px,6vw,72px); font-family:var(--mono); font-size:10.5px; color:var(--grey-light); display:flex; align-items:center; gap:10px; font-weight:400; }
.scroll-cue::after{ content:""; width:26px; height:1px; background:var(--grey-light); }

/* ---- section head ---- */
.section-head{ grid-column:1 / 13; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; border-top:1px solid var(--black); padding-top:14px; }
.eyebrow{ font-family:var(--mono); font-size:10.5px; color:var(--red); letter-spacing:0.05em; display:block; margin-bottom:12px; font-weight:400; }
.section-head h2{ font-family:var(--serif); font-weight:500; letter-spacing:0.01em; font-size:clamp(24px,3vw,38px); }
.section-head .note{ font-family:var(--mono); font-size:11px; color:var(--grey); max-width:260px; line-height:1.8; font-weight:400; }
.section-wrap{ margin-top:130px; }

/* ---- services ---- */
.index-list{ grid-column:1 / 13; border-top:1px solid var(--black); margin-top:48px; }
.index-row{
  display:grid; grid-template-columns:56px 3fr 4fr 3fr; align-items:start; gap:clamp(16px,2vw,28px);
  padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--line);
  transition:background 0.15s linear;
}
.index-row:hover{ background:var(--off); }
@media(max-width:760px){ .index-row{grid-template-columns:32px 1fr; row-gap:10px;} .index-row .col-desc, .index-row .col-tools{grid-column:1 / -1;} }
.index-row .num{ font-family:var(--mono); font-size:11px; color:var(--red); padding-top:5px; font-weight:400; }
.index-row h3{ font-family:var(--serif); font-size:19px; font-weight:500; letter-spacing:0.01em; }
.index-row .col-desc{ font-size:13.5px; color:var(--grey); max-width:44ch; font-weight:400; }
.index-row .col-tools{ font-family:var(--mono); font-size:10.5px; color:var(--grey-light); text-align:right; line-height:1.9; font-weight:400; }
@media(max-width:760px){ .index-row .col-tools{text-align:left;} }

/* ---- company facts ---- */
.facts{ grid-column:1 / 13; border-top:1px solid var(--black); margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); }
@media(max-width:900px){ .facts{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .facts{grid-template-columns:1fr;} }
.fact{ padding:24px 26px 24px 0; border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.fact:nth-child(3n){ border-right:none; padding-right:0; }
@media(max-width:900px){ .fact:nth-child(3n){border-right:1px solid var(--line);} .fact:nth-child(2n){border-right:none;} }
@media(max-width:560px){ .fact{border-right:none !important;} }
.fact dt{ font-family:var(--mono); font-size:10px; color:var(--grey-light); letter-spacing:0.04em; margin-bottom:10px; font-weight:400; }
.fact dd{ font-size:14px; font-weight:400; }

/* ---- artesa ---- */
.artesa{ background:var(--black); color:var(--white); padding:clamp(70px,10vw,150px) 0; margin-top:130px; }
.artesa .tag-block{ grid-column:1 / 3; font-family:var(--mono); font-size:10.5px; color:var(--red); border-top:1px solid rgba(255,255,255,0.2); padding-top:12px; height:fit-content; font-weight:400; }
@media(max-width:900px){ .artesa .tag-block{grid-column:1/5;} }
.artesa-body{ grid-column:4 / 13; }
@media(max-width:900px){ .artesa-body{grid-column:1/5; margin-top:28px;} }
.artesa h3{ font-family:var(--serif); font-weight:500; letter-spacing:0.01em; font-size:clamp(26px,3.4vw,42px); margin-bottom:22px; line-height:1.5; }
.artesa p{ color:#B5B5B1; max-width:56ch; font-size:14px; margin-bottom:12px; font-weight:400; }
.artesa .link{ display:inline-flex; gap:10px; align-items:center; margin-top:24px; font-family:var(--mono); font-size:11.5px; color:var(--white); border-bottom:1px solid var(--red); padding-bottom:4px; font-weight:400; }

/* ---- contact ---- */
.contact{ border-top:1px solid var(--black); padding:clamp(70px,10vw,130px) 0 90px; }
.contact h2{ grid-column:1 / 8; font-family:var(--serif); font-weight:500; letter-spacing:0.01em; font-size:clamp(26px,3.8vw,48px); line-height:1.45; }
@media(max-width:900px){ .contact h2{grid-column:1/5;} }
.contact-mail{ grid-column:1 / 8; display:inline-block; margin-top:28px; font-family:var(--mono); font-size:15px; border-bottom:2px solid var(--red); padding-bottom:4px; width:fit-content; font-weight:400; }
@media(max-width:900px){ .contact-mail{grid-column:1/5;} }
.contact-side{ grid-column:9 / 13; align-self:start; }
@media(max-width:900px){ .contact-side{grid-column:1/5; margin-top:36px;} }
.contact-side .row{ display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:16px; font-size:13px; }
.contact-side dt{ font-family:var(--mono); color:var(--grey-light); font-size:10.5px; font-weight:400; }
.contact-side dd{ color:var(--grey); font-weight:400; }

/* ---- generic page/post content (page.php, single.php, index.php) ---- */
.content-section{ padding:150px 0 120px; }
.content-section .entry{ grid-column:1 / 9; }
@media(max-width:900px){ .content-section .entry{grid-column:1/5;} }
.entry h1.entry-title{ font-family:var(--serif); font-weight:500; font-size:clamp(30px,4.4vw,54px); line-height:1.4; margin-bottom:32px; }
.entry .entry-content{ font-size:14.5px; color:var(--grey); }
.entry .entry-content p{ margin-bottom:1.4em; max-width:60ch; }
.entry .entry-content h2{ font-family:var(--serif); font-weight:500; color:var(--black); font-size:26px; margin:1.6em 0 0.6em; }
.entry .entry-content a{ border-bottom:1px solid var(--red); }
.post-list{ grid-column:1/13; border-top:1px solid var(--black); margin-top:48px; }
.post-list article{ padding:28px 0; border-bottom:1px solid var(--line); }
.post-list h2{ font-family:var(--serif); font-weight:500; font-size:20px; }
.post-list .meta{ font-family:var(--mono); font-size:10.5px; color:var(--grey-light); margin-top:8px; }

footer.site-footer{ border-top:1px solid var(--black); padding:26px 0 40px; }
footer.site-footer .g{ font-family:var(--mono); font-size:10px; color:var(--grey-light); font-weight:400; }
footer.site-footer .f-l{ grid-column:1/7; }
footer.site-footer .f-r{ grid-column:9/13; text-align:right; }
@media(max-width:900px){ footer.site-footer .f-l, footer.site-footer .f-r{grid-column:1/5; text-align:left;} }

.reveal{ opacity:0; transform:translateY(12px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

.screen-reader-text{
  position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden;
}