/*
Theme Name:   Renatti
Theme URI:    https://renatti.kr
Description:  Renatti — 패브릭 · 비건레더 핸드메이드 침대 브랜드. GeneratePress 자식 테마.
Author:       Renatti
Template:     generatepress
Version:      1.2.0
Text Domain:  renatti
*/

/* === 1. WordPress 환경 보정 === */
body.admin-bar .site-head{top:32px}
@media (max-width:782px){ body.admin-bar .site-head{top:46px} }
.site-head{z-index:99}
.site-content,.content-area,.site-main,.entry-content{margin:0;padding:0;max-width:none}
.entry-content > *{margin:0}
.site-header,.site-footer,.entry-header,.entry-title{display:none}
.gp-icon{display:none}
.entry-content .wp-block-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.4vw,56px);margin-top:clamp(40px,6vw,80px)}
.entry-content .wp-block-gallery figure{margin:0}
.entry-content .wp-block-gallery img{aspect-ratio:4/5;object-fit:cover;width:100%}
.nav > li > .sub-menu{position:absolute;top:100%;left:-16px;min-width:190px;padding:14px 16px;background:var(--paper);border:1px solid var(--ink-12);opacity:0;visibility:hidden;transform:translateY(6px);transition:all .35s var(--ease)}
.nav > li:hover > .sub-menu{opacity:1;visibility:visible;transform:none}
.nav > li > .sub-menu li{list-style:none}
.nav > li > .sub-menu a{display:block;padding:6px 0;font-size:12px;letter-spacing:.05em;color:var(--ink-60)}
.nav > li > .sub-menu a:hover{color:var(--ink)}

/* === 2. Renatti 디자인 토큰 (renatti-single.html과 동일) === */
/* =========================================================
   RENATTI — Global Stylesheet
   Structure mirrors Norm Architects (normcph.com) layout system
   ========================================================= */

:root{
  /* --- Master brand: Forest Green --- */
  --forest:       #1F3D2B;   /* 코어 — 포레스트 그린 */
  --forest-deep:  #14291D;   /* 히어로 · 밴드 최심부 */
  --forest-mid:   #3C6047;   /* 그라디언트 중간 */
  --forest-pale:  #7E9682;   /* 그라디언트 상단 */

  --ink:        #16261C;     /* 본문 — 그린이 섞인 잉크 (순수 블랙 금지) */
  --ink-60:     rgba(22,38,28,.60);
  --ink-40:     rgba(22,38,28,.40);
  --ink-12:     rgba(22,38,28,.12);

  --paper:      #F7F8F4;     /* 배경 — 아주 옅은 그린 화이트 */
  --linen:      #E7EBE1;     /* 섹션 구분 — 페일 세이지 */
  --stone:      #D2D9CB;
  --brass:      #A98A4C;     /* 최소한의 골드 액센트 */

  --f-display: "Jost", "Pretendard", -apple-system, sans-serif;
  --f-serif:   "Cormorant Garamond", "Noto Serif KR", serif;
  --f-body:    "Pretendard", "Jost", -apple-system, sans-serif;

  --gut: clamp(20px, 4vw, 64px);
  --sec: clamp(80px, 11vw, 180px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-weight:300;
  font-size:15px;line-height:1.85;letter-spacing:-.01em;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- Type scale ---------- */
.eyebrow{
  font-family:var(--f-display);font-size:10px;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ink-40);
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:300;letter-spacing:-.02em;line-height:1.14}
.h-xl{font-size:clamp(2.4rem,6.2vw,5.6rem)}
.h-lg{font-size:clamp(1.9rem,4vw,3.4rem)}
.h-md{font-size:clamp(1.35rem,2.2vw,2rem)}
.h-sm{font-size:clamp(1.05rem,1.5vw,1.3rem)}
.lead{font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.9;color:var(--ink-60);max-width:60ch}
.muted{color:var(--ink-60)}
.wordmark{font-family:var(--f-serif);font-weight:400;letter-spacing:.22em;text-transform:uppercase}

/* ---------- Header (Norm-style: logo left, flat menu right, sticky) ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);
  background:rgba(250,249,247,0);transition:background .5s var(--ease),padding .5s var(--ease);
}
.site-head.is-stuck{background:rgba(250,249,247,.94);backdrop-filter:blur(14px);padding:14px var(--gut);border-bottom:1px solid var(--ink-12)}
.brandmark{font-family:var(--f-serif);font-size:19px;letter-spacing:.34em;text-transform:uppercase}
.brandmark small{display:block;font-family:var(--f-display);font-size:8px;letter-spacing:.3em;color:var(--ink-40);margin-top:2px}

.nav{display:flex;align-items:center;gap:34px}
.nav > li{list-style:none;position:relative}
.nav > li > a{
  font-family:var(--f-display);font-size:11px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;padding:10px 0;display:block;
}
.nav > li > a::after{content:"";display:block;height:1px;background:var(--ink);width:0;transition:width .4s var(--ease);margin-top:3px}
.nav > li:hover > a::after,.nav > li.current > a::after{width:100%}
.submenu{
  position:absolute;top:100%;left:-16px;min-width:190px;padding:14px 16px;
  background:var(--paper);border:1px solid var(--ink-12);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:all .35s var(--ease);
}
.nav > li:hover .submenu{opacity:1;visibility:visible;transform:none}
.submenu li{list-style:none}
.submenu a{display:block;padding:6px 0;font-size:12px;letter-spacing:.05em;color:var(--ink-60)}
.submenu a:hover{color:var(--ink)}

.burger{display:none;width:26px;height:14px;position:relative;background:none;border:0;cursor:pointer}
.burger span{position:absolute;left:0;right:0;height:1px;background:var(--ink);transition:.4s var(--ease)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){bottom:0}
body.menu-open .burger span:nth-child(1){top:6px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){bottom:7px;transform:rotate(-45deg)}

.mobile-panel{
  position:fixed;inset:0;z-index:80;background:var(--paper);
  padding:120px var(--gut) 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:.5s var(--ease);
}
body.menu-open .mobile-panel{opacity:1;visibility:visible}
.mobile-panel a{display:block;font-family:var(--f-display);font-size:26px;font-weight:300;padding:10px 0}
.mobile-panel .sub a{font-size:14px;color:var(--ink-60);padding:5px 0 5px 16px;letter-spacing:.06em}

/* ---------- Layout ---------- */
main{padding-top:0}
.wrap{padding:0 var(--gut)}
.section{padding:var(--sec) var(--gut);position:relative}
.section--tight{padding-top:calc(var(--sec)*.55);padding-bottom:calc(var(--sec)*.55)}
.rule{height:1px;background:var(--ink-12);margin:0 var(--gut)}

/* Vertical stacked section label — Norm's signature device */
.stack-label{
  position:absolute;top:var(--sec);left:var(--gut);
  font-family:var(--f-display);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-40);line-height:1.5;
}
.stack-label span{display:block}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:56px}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;display:flex;align-items:flex-end;
  padding:0 var(--gut) clamp(40px,6vw,80px);
  position:relative;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,.10) 0%,rgba(20,18,15,.02) 40%,rgba(20,18,15,.34) 100%)}
.hero-copy{max-width:760px;color:#fff}
.hero-copy .eyebrow{color:rgba(255,255,255,.7)}
.hero-copy h1{margin:18px 0 20px;color:#fff}
.hero-copy p{color:rgba(255,255,255,.82);max-width:46ch;font-size:15px}
.hero-meta{
  position:absolute;right:var(--gut);bottom:clamp(40px,6vw,80px);
  text-align:right;color:rgba(255,255,255,.7);
  font-family:var(--f-display);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
}

/* Fabric/leather "material" surfaces built with CSS (image placeholders) */
.surface{position:relative;overflow:hidden;background:var(--stone)}
.surface--forest{background:linear-gradient(160deg,var(--forest-deep) 0%,var(--forest-mid) 55%,var(--forest-pale) 100%)}
.surface::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
.surface::after{
  content:"";position:absolute;inset:-30%;
  background:radial-gradient(60% 60% at 30% 25%,rgba(255,255,255,.30),transparent 70%);
}
.surface .caption{
  position:absolute;left:16px;bottom:14px;z-index:2;
  font-family:var(--f-display);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.85);
}

/* ---------- Grids ---------- */
.grid{display:grid;gap:clamp(28px,3.4vw,56px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,110px);align-items:center}
.split--text{grid-template-columns:.85fr 1.15fr;align-items:start}

/* Project card (mirrors Norm's project tile: image → title → categories | year) */
.card{display:block;group:card}
.card .thumb{aspect-ratio:4/5;margin-bottom:18px;transition:transform 1.1s var(--ease)}
.card:hover .thumb{transform:scale(1.03)}
.card h3{margin-bottom:8px}
.card .meta{
  display:flex;gap:8px;align-items:center;
  font-family:var(--f-display);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-40);
}
.card .meta i{font-style:normal}
.card p{font-size:14px;color:var(--ink-60);margin-top:8px;max-width:34ch}

/* Sub-brand swatch chips */
.chips{display:flex;gap:6px;margin-top:12px}
.chip{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.4);box-shadow:0 0 0 1px var(--ink-12)}

/* ---------- Editorial / feature band ---------- */
.band{position:relative;min-height:78vh;display:flex;align-items:center;padding:var(--sec) var(--gut);overflow:hidden}
.band .band-bg{position:absolute;inset:0;z-index:-1}
.band .band-bg::after{content:"";position:absolute;inset:0;background:rgba(20,18,15,.42)}
.band .inner{max-width:620px;color:#fff}
.band .inner .eyebrow{color:rgba(255,255,255,.65)}
.band .inner p{color:rgba(255,255,255,.85);margin-top:16px}

/* ---------- Table (specs / materials) ---------- */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{text-align:left;padding:18px 12px;border-bottom:1px solid var(--ink-12);vertical-align:top}
.table th{font-family:var(--f-display);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-40);font-weight:400}

/* ---------- Numbered process list ---------- */
.steps{counter-reset:s}
.steps li{list-style:none;counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--ink-12)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--f-display);font-size:11px;letter-spacing:.2em;color:var(--ink-40);padding-top:6px}
.steps h4{margin-bottom:6px}
.steps p{color:var(--ink-60);font-size:14px;max-width:60ch}

/* ---------- Link / buttons ---------- */
.link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  padding-bottom:6px;border-bottom:1px solid var(--ink);
}
.link:hover{gap:18px;border-color:var(--forest)}
.link,.link:hover{transition:gap .4s var(--ease)}
.link--light{color:#fff;border-color:rgba(255,255,255,.6)}

/* ---------- Footer ---------- */
.site-foot{padding:var(--sec) var(--gut) 40px;border-top:1px solid var(--ink-12)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:80px}
.site-foot h5{font-family:var(--f-display);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-40);margin-bottom:18px;font-weight:400}
.site-foot li{list-style:none}
.site-foot li a{font-size:14px;color:var(--ink-60);line-height:2.1}
.site-foot li a:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11px;color:var(--ink-40);letter-spacing:.06em}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .nav{display:none}
  .burger{display:block}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .g-2,.g-3,.g-4,.split,.split--text{grid-template-columns:1fr}
  .stack-label{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero-meta{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}