/*
Theme Name: EXPED Japan Renewal Preview
Author: SOHSHIN / EXPED Japan
Description: EXPED Japan brand site theme based on the approved top page concept.
Version: 0.8.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: exped-japan
*/

    :root { --red:#e6332a; --ink:#1c211f; --muted:#6d726f; --cream:#f4f3ee; --line:#d9dcd6; --display:'Barlow Condensed',Impact,sans-serif; --body:'Noto Sans JP',sans-serif; }
    * { box-sizing:border-box } html { scroll-behavior:smooth } body { margin:0; color:var(--ink); background:#fff; font-family:var(--body); font-size:14px; line-height:1.85 } a { color:inherit; text-decoration:none } img { display:block; width:100% } button { font:inherit; cursor:pointer } ::selection { background:var(--red); color:#fff }
    .announcement { height:28px; display:flex; justify-content:center; align-items:center; gap:16px; background:var(--red); color:#fff; font:600 11px var(--display); letter-spacing:.18em } .announcement span { opacity:.75 }
    .header { position:absolute; top:28px; left:0; right:0; z-index:10; display:flex; align-items:center; gap:40px; padding:21px clamp(22px,4vw,70px); color:#fff; border-bottom:1px solid rgba(255,255,255,.28) } .logo { font:800 43px/.8 var(--display); font-style:italic; letter-spacing:-.06em; transform:skew(-8deg); white-space:nowrap } .logo b { font:600 10px var(--body); letter-spacing:.16em; font-style:normal; transform:skew(8deg); display:block; text-align:right; margin:7px 3px 0 0 } .nav { display:flex; align-items:center; gap:clamp(18px,2.25vw,42px); margin-left:auto; font:700 14px var(--display); letter-spacing:.12em } .nav a { transition:opacity .2s } .nav a:hover { opacity:.65 } .shop-link { border:1px solid rgba(255,255,255,.8); padding:9px 16px; margin-left:3px; white-space:nowrap } .menu { display:none; color:#fff; border:0; background:transparent; font:700 14px var(--display) }
    .hero { min-height: min(850px,91vh); min-height: min(850px,91svh); position:relative; display:flex; align-items:flex-end; background:#252e30 url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=2200&q=85') center 47%/cover no-repeat; color:#fff } .hero:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,19,21,.38),transparent 72%),linear-gradient(0deg,rgba(8,20,24,.73),transparent 65%) } .hero-inner { z-index:1; width:100%; padding:0 clamp(24px,6vw,104px) clamp(57px,8vh,100px) } .eyebrow { display:flex; align-items:center; gap:14px; font:700 13px var(--display); letter-spacing:.26em } .eyebrow:before { content:''; width:35px; height:2px; background:var(--red) } .hero h1 { font:700 clamp(72px,12vw,185px)/.82 var(--display); letter-spacing:-.025em; margin:20px 0 19px; text-transform:uppercase } .hero h1 em { color:var(--red); font-style:normal } .hero-sub { display:flex; justify-content:space-between; align-items:flex-end; gap:35px } .hero-sub p { font-size:clamp(15px,1.45vw,19px); line-height:2.05; letter-spacing:.1em; margin:0 } .hero-scroll { font:600 12px var(--display); letter-spacing:.2em; white-space:nowrap; display:flex; align-items:center; gap:18px } .hero-scroll:after { content:'↓'; font:26px var(--display) }
    .section { padding:clamp(75px,9vw,145px) clamp(24px,6vw,104px) } .shell { max-width:1450px; margin:0 auto } .overline { color:var(--red); font:700 14px var(--display); letter-spacing:.19em } .section-title { font:700 clamp(56px,7vw,106px)/.92 var(--display); letter-spacing:-.018em; margin:16px 0 26px } .section-lead { font-size:15px; line-height:2.05; letter-spacing:.045em; max-width:680px } .arrow-link { display:inline-flex; align-items:center; gap:30px; padding:11px 0; border-bottom:1px solid currentColor; font:700 14px var(--display); letter-spacing:.13em; white-space:nowrap } .arrow-link:after { content:'↗'; font:23px var(--display); line-height:1; transition:transform .25s } .arrow-link:hover:after { transform:translate(4px,-4px) }
    .intro { display:grid; grid-template-columns:1fr 1fr; gap:12%; align-items:end; padding-top:92px; padding-bottom:95px } .intro .section-title { margin-bottom:0 } .intro-copy { padding-bottom:7px } .intro-copy p { margin:0 0 19px; line-height:2.1 } .intro-copy .arrow-link { margin-top:12px }
    .categories { background:var(--cream); padding-top:95px; padding-bottom:110px } .section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:48px } .section-head .section-title { margin-bottom:0 } .category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px } .category { position:relative; min-height:clamp(300px,34vw,490px); overflow:hidden; color:#fff; background:#41514c } .category img { height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .65s } .category:hover img { transform:scale(1.055) } .category:after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,19,20,.78),rgba(8,19,20,.04) 65%) } .category:nth-child(2) img { object-position:62% center } .category:nth-child(3) img { object-position:54% center } .category-content { position:absolute; z-index:1; left:24px; right:24px; bottom:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:4px } .category-content small { display:block; font:600 10px var(--body); letter-spacing:.16em; margin-bottom:7px } .category-content strong { display:block; font:700 clamp(27px,3vw,42px)/1 var(--display) } .category-content i { font:26px var(--display); font-style:normal }
    .feature { display:grid; grid-template-columns:54% 46%; min-height:610px; background:#22302c; color:#fff } .feature-image { overflow:hidden } .feature-image img { height:100%; max-height:760px; min-height:580px; object-fit:cover; object-position:center 55% } .feature-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:70px clamp(45px,7vw,115px) 70px clamp(45px,5vw,90px) } .feature-copy .overline { color:#ff756e } .feature-copy h2 { font:700 clamp(70px,8.3vw,128px)/.85 var(--display); margin:24px 0 28px } .feature-copy h2 span { color:var(--red) } .feature-copy p { max-width:490px; font-size:15px; line-height:2.1; letter-spacing:.04em; margin:0 0 40px } .feature-note { margin-top:65px; padding-top:19px; width:100%; border-top:1px solid #72807a; font:600 12px var(--display); letter-spacing:.18em; color:#cbd2ce }
    .products { background:#fff } .products .section-head { margin-bottom:35px } .product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px } .product-card { display:block } .product-art { position:relative; background:#f3f4f1; aspect-ratio:1.12; overflow:hidden; display:grid; place-items:center } .product-art img { width:80%; height:82%; object-fit:contain; mix-blend-mode:multiply; transition:transform .5s } .product-card:hover .product-art img { transform:scale(1.055) } .product-tag { position:absolute; left:18px; top:18px; background:var(--red); color:#fff; padding:3px 10px; font:700 11px var(--display); letter-spacing:.11em } .product-data { display:flex; justify-content:space-between; align-items:flex-start; padding:18px 1px } .product-data strong { display:block; font:700 clamp(27px,3vw,38px)/1 var(--display) } .product-data span { color:var(--muted); font-size:12px } .product-data i { font:26px var(--display); font-style:normal; line-height:1 } .products-foot { display:flex; justify-content:flex-end; margin-top:28px }
    .statement { background:var(--cream); display:grid; grid-template-columns:1fr 1fr; gap:10%; align-items:center } .statement-image { aspect-ratio: .98; overflow:hidden } .statement-image img { height:100%; object-fit:cover } .statement .section-title { font-size:clamp(57px,7vw,110px) } .statement-copy p { max-width:540px; margin:32px 0 25px; line-height:2.25 } .statement .arrow-link { margin-top:20px }
    .journal .section-head { margin-bottom:42px } .story-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:25px } .story img { height:clamp(220px,24vw,370px); object-fit:cover; transition:transform .5s } .story .image-wrap { overflow:hidden; background:var(--cream) } .story:hover img { transform:scale(1.045) } .story-meta { margin:17px 0 9px; color:var(--red); font:700 12px var(--display); letter-spacing:.17em } .story h3 { font-size:clamp(17px,1.65vw,22px); line-height:1.55; margin:0; letter-spacing:.02em } .story p { font-size:12px; color:var(--muted); margin:8px 0 0 }
    .news { border-top:1px solid var(--line); padding-top:72px; padding-bottom:100px } .news .section-head { margin-bottom:30px } .news .section-title { font-size:clamp(50px,6vw,82px) } .news-row { border-top:1px solid var(--line); padding:22px 0; display:grid; grid-template-columns:150px 100px 1fr 30px; align-items:center; gap:16px; transition:color .2s } .news-row:last-child { border-bottom:1px solid var(--line) } .news-row:hover { color:var(--red) } .news-row time,.news-row small { font:600 13px var(--display); letter-spacing:.08em } .news-row small { color:var(--red) } .news-row strong { font-weight:500; font-size:14px } .news-row i { font:22px var(--display); font-style:normal; text-align:right }
    .footer { background:#1b2522; color:#fff; padding:78px clamp(24px,6vw,104px) 30px } .footer-top { display:flex; justify-content:space-between; gap:35px; padding-bottom:95px } .footer-mark { font:800 clamp(120px,18vw,250px)/.8 var(--display); font-style:italic; letter-spacing:-.065em; transform:skew(-8deg); color:var(--red); margin-left:-8px } .footer p { font-size:13px; letter-spacing:.08em; margin:22px 0 } .footer-links { display:grid; grid-template-columns:repeat(2,minmax(100px,1fr)); gap:8px 45px; align-content:start; padding-top:8px; font:600 16px var(--display); letter-spacing:.1em } .footer-links a:hover { color:var(--red) } .footer-bottom { border-top:1px solid #53615b; padding-top:22px; display:flex; justify-content:space-between; color:#aab3ac; font:500 11px var(--display); letter-spacing:.11em }
    .concept-label { position:fixed; right:18px; bottom:16px; z-index:12; background:rgba(255,255,255,.94); color:var(--ink); border:1px solid var(--line); padding:8px 12px; font:700 10px var(--display); letter-spacing:.11em; box-shadow:0 2px 14px #0002 }
    @media(max-width:1000px) { .header { gap:20px } .nav { gap:16px; font-size:12px } .category-grid { grid-template-columns:repeat(2,1fr) } .category { min-height:390px } .story-grid { grid-template-columns:repeat(2,1fr) } .story:first-child { grid-column:span 2 } .story:first-child img { height:420px } }
    @media(max-width:700px) { .announcement { font-size:9px } .header { padding:18px 22px } .logo { font-size:35px } .logo b { font-size:8px } .nav { display:none; position:absolute; top:100%; left:0; right:0; background:#1b2522; padding:26px; flex-direction:column; align-items:flex-start; gap:20px; font-size:18px } .nav.is-open { display:flex } .menu { display:block; margin-left:auto } .hero { min-height:720px; min-height:88svh; background-position:54% center } .hero-inner { padding-bottom:55px } .hero h1 { font-size:clamp(67px,15vw,115px); margin:17px 0 24px } .hero-sub { display:block } .hero-sub p { font-size:14px } .hero-scroll { display:none } .section { padding:78px 22px } .section-title { font-size:67px } .intro { display:block } .intro-copy { margin-top:32px } .categories { padding-top:70px } .section-head { display:block; margin-bottom:30px } .section-head .arrow-link { margin-top:14px } .category-grid { gap:9px } .category { min-height:270px } .category-content { left:13px; right:13px; bottom:13px } .category-content strong { font-size:25px } .category-content small { font-size:9px } .feature { display:block } .feature-image img { min-height:0; height:380px } .feature-copy { padding:68px 25px } .feature-copy h2 { font-size:86px } .feature-note { margin-top:45px } .product-grid { grid-template-columns:repeat(2,1fr); gap:12px } .product-card:last-child { display:none } .product-art { aspect-ratio:.9 } .product-art img { width:90%; height:80% } .product-data { padding-top:11px } .product-data strong { font-size:26px } .product-data span { font-size:10px } .statement { display:flex; flex-direction:column; align-items:stretch; gap:35px } .statement-image { aspect-ratio:1.25 } .statement-copy p { margin-top:23px } .story-grid { display:block } .story { display:block; margin-bottom:34px } .story img,.story:first-child img { height:270px } .news-row { grid-template-columns:75px 1fr 18px; gap:5px 12px } .news-row small { grid-column:2 } .news-row strong { grid-column:2; font-size:13px } .news-row i { grid-column:3; grid-row:1/3 } .footer-top { display:block; padding-bottom:60px } .footer-mark { font-size:120px } .footer-links { margin-top:42px } .footer-bottom { gap:15px; flex-direction:column } .concept-label { font-size:9px; right:10px; bottom:10px } }
    @media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition:none!important } }
  
/* WordPress adjustments */
.admin-bar .header { top:60px } .admin-bar .announcement { margin-top:32px } .site-content { min-height:45vh } .standard-page { max-width:900px; margin:0 auto; padding:150px 24px 110px } .standard-page h1 { font:700 clamp(56px,7vw,100px)/.95 var(--display) } .standard-page a { text-decoration:underline; text-underline-offset:3px } .standard-page img { height:auto } .entry-list { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:45px } .entry-list article img { aspect-ratio:1.4; object-fit:cover } .entry-list h2 { font:700 32px var(--display) } .screen-reader-text { position:absolute; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden } .screen-reader-text:focus { position:static; width:auto; height:auto; clip:auto } @media(max-width:700px) { .admin-bar .header { top:74px } .entry-list { grid-template-columns:1fr } }

.menu-items { display:flex; align-items:center; gap:clamp(18px,2.25vw,42px); list-style:none; padding:0; margin:0 } .footer-menu-items { display:contents; list-style:none; padding:0; margin:0 } .footer-menu-items li { list-style:none } @media(max-width:700px) { .menu-items { flex-direction:column; align-items:flex-start; gap:20px } }

body:not(.home) .header { position:relative; top:auto; background:#1b2522; border-bottom:0 } body:not(.home) .site-content { padding-top:100px } .entry-content { margin-top:30px; overflow-wrap:anywhere } .entry-content img { max-width:100%; height:auto }
@media(max-width:700px) { body:not(.home) .site-content { padding-top:70px } }

.section-title { overflow-wrap:anywhere }

/* The same official SVG is used in both logo positions. */
.header .logo { display:block; width:clamp(118px,10vw,156px); transform:none; font-size:0; line-height:1; flex:none }
.header .logo img { display:block; width:100%; height:auto; filter:brightness(0) invert(1) }
.footer .footer-mark { width:clamp(190px,24vw,340px); margin:0; transform:none; font-size:0; line-height:1 }
.footer .footer-mark img { display:block; width:100%; height:auto; filter:brightness(0) invert(1) }
@media(max-width:700px) { .header .logo { width:125px } .footer .footer-mark { width:220px } }

/* Customizer options for logo size, logo treatment and footer color. */
.header .logo { width:var(--exped-logo-width,144px); max-width:34vw }
.footer .footer-mark { width:var(--exped-logo-width,300px); max-width:70vw }
.header .logo img, .footer .footer-mark img { filter:none }
.header .logo-white img, .footer .logo-white img { filter:brightness(0) invert(1) }
.footer, body:not(.home) .header { background:var(--exped-footer-color,#1b2522) }
@media(max-width:700px) { .header .logo { width:var(--exped-logo-width,144px); max-width:38vw } .footer .footer-mark { width:var(--exped-logo-width,300px); max-width:70vw } }

.footer, body:not(.home) .header { color:var(--exped-footer-text,#fff) }
.header { top:0 }
.admin-bar .header { top:32px }
@media(max-width:782px) { .admin-bar .header { top:46px } }
.footer-instagram { display:inline-flex; align-items:center; gap:10px; white-space:nowrap }
.footer-instagram svg { display:block; flex:none }
.instagram-section { background:var(--cream) }
.instagram-section .section-title { font-size:clamp(48px,6vw,82px) }
.hero h1 { font-size:clamp(60px,9vw,138px); letter-spacing:-.035em }
@media(max-width:700px) { .hero h1 { font-size:clamp(43px,9vw,68px) } }
.intro .section-title { font-family:var(--body); font-size:clamp(24px,3vw,42px); line-height:1.5; letter-spacing:.01em; font-weight:700 }
.feature-copy h2 { font-size:clamp(47px,5vw,72px); line-height:.98 }