/* ==========================================================
   florka brand site — style.css
   Tokens
========================================================== */
:root{
  --c-base:      #F8F6F2;
  --c-base-2:    #EFE6DC;
  --c-card:      #F3E9E1;
  --c-brand:     #BC8B92;
  --c-brand-dk:  #9C6B72;
  --c-text:      #4A3B36;
  --c-text-soft: #8A7A73;
  --c-line:      rgba(74,59,54,0.14);

  --f-heading: 'Shippori Mincho', 'Noto Serif JP', serif;
  --f-body:    'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --f-en:      'Optima', 'EB Garamond', 'Times New Roman', serif;

  --content-w: 1120px;
  --gap-section: clamp(72px, 12vw, 160px);
  --radius: 2px;
}

*{ 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{
  margin:0;
  background: var(--c-base);
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: 300;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{
  font-family: var(--f-heading);
  font-weight: 500;
  color: var(--c-text);
  margin: 0 0 0.6em;
  letter-spacing: 0.02em;
}
h1{ font-size: clamp(2rem, 5vw, 3rem); line-height: 1.5; }
h2{ font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.6; }
h3{ font-size: 1.05rem; font-weight: 600; }

p{ margin: 0 0 1.1em; max-width: 34em; }
.center p{ margin-left:auto; margin-right:auto; }

a{ color: inherit; text-decoration: none; }

img{ max-width: 100%; display:block; }

.eyebrow{
  font-family: var(--f-en);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--c-brand-dk);
  margin: 0 0 0.9em;
}
.eyebrow.center, h2.center, .lead.center, p.center{ text-align:center; }
.lead.center, p.center{ margin-left:auto; margin-right:auto; }

.lead{
  font-family: var(--f-heading);
  font-size: 1.3rem;
  line-height: 1.9;
  max-width: 30em;
}

.section{ padding: var(--gap-section) 24px; }
.section-inner{ max-width: var(--content-w); margin: 0 auto; }

.btn{
  display:inline-block;
  padding: 15px 38px;
  font-family: var(--f-en);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  border-radius: var(--radius);
  border: 1px solid var(--c-brand-dk);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.btn-primary{ background: var(--c-brand-dk); color: #fff; }
.btn-primary:hover{ background: var(--c-text); border-color: var(--c-text); }
.btn-outline{ background: transparent; color: var(--c-brand-dk); }
.btn-outline:hover{ background: var(--c-brand-dk); color: #fff; }
.btn-large{ padding: 18px 56px; font-size: 1rem; margin-top: 28px; }

/* ---------------- Header ---------------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  background: transparent;
  transition: background-color .4s ease, box-shadow .4s ease;
}
.site-header.is-scrolled{
  background: rgba(248,246,242,0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 var(--c-line);
}
.header-inner{
  max-width: 1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 24px;
}
.brand-logo{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:32px; height:32px; object-fit:contain; }
.brand-word{ font-family: var(--f-en); font-size:1.3rem; letter-spacing:0.03em; color: var(--c-brand-dk); }

.main-nav ul{ display:flex; gap: 30px; list-style:none; margin:0; padding:0; }
.main-nav a{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:0.86rem; }
.nav-ja{ font-family: var(--f-heading); }
.nav-en{ font-family: var(--f-en); font-size:0.66rem; letter-spacing:0.14em; color: var(--c-text-soft); }

.cta-shop{
  font-family: var(--f-en); font-size:0.82rem; letter-spacing:0.1em;
  border: 1px solid var(--c-brand-dk); color: var(--c-brand-dk);
  padding: 9px 20px; border-radius: var(--radius);
  transition: background-color .3s ease, color .3s ease;
}
.cta-shop:hover{ background: var(--c-brand-dk); color:#fff; }

.nav-toggle{ display:none; }

/* ---------------- Hero ---------------- */
.hero{
  position: relative; min-height: 100vh; display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media-placeholder{
  width:100%; height:100%;
  background:
    radial-gradient(circle at 30% 20%, rgba(188,139,146,0.25), transparent 55%),
    linear-gradient(180deg, var(--c-base-2) 0%, var(--c-base) 70%);
}
.hero-content{
  position:relative; z-index:1;
  padding: 0 24px 100px;
  max-width: 720px;
}
.hero-sub{ font-size:1.05rem; color: var(--c-text-soft); margin-bottom:2em; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; right:32px; bottom:36px; z-index:1;
  font-family: var(--f-en); font-size:0.7rem; letter-spacing:0.2em;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color: var(--c-brand-dk);
}
.scroll-cue span{
  width:1px; height:44px; background: var(--c-brand-dk); opacity:0.5;
}

/* ---------------- Grid layouts ---------------- */
.grid-2{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,6vw,96px);
  align-items:center;
}
.grid-2.reverse .col-media{ order:2; }
.grid-2.reverse .col-text{ order:1; }

.media-frame{ aspect-ratio: 4/5; overflow:hidden; border-radius: var(--radius); }
.media-frame.portrait{ aspect-ratio: 3/4; max-width: 420px; margin: 0 auto; }
.media-frame img{ width:100%; height:100%; object-fit:cover; }
.media-placeholder{
  width:100%; height:100%;
  background: linear-gradient(155deg, var(--c-base-2), var(--c-card));
}
.media-placeholder.large{ }

.story-mark{ width:70%; margin:0 auto; opacity:0.9; }
.story-mark-frame{
  aspect-ratio: 4/5; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(155deg, var(--c-base-2), var(--c-card));
  border-radius: var(--radius); overflow:hidden;
}
.story-mark-frame .story-mark{
  width:50%; max-width:220px; height:auto; object-fit:contain; margin:0;
}

/* ---------------- Philosophy ---------------- */
.philosophy-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:32px;
  margin-top: 56px;
}
.philosophy-card{
  background: var(--c-card); padding: 40px 30px; border-radius: var(--radius);
  text-align:left;
}
.card-index{ font-family: var(--f-en); font-style:italic; color: var(--c-brand-dk); font-size:1.1rem; margin-bottom:0.4em; }

/* ---------------- Food ---------------- */
.food-hero-media{ margin: 48px 0 64px; aspect-ratio: 16/8; overflow:hidden; border-radius: var(--radius); }
.food-hero-media img,
.food-hero-media .media-placeholder.large{ width:100%; height:100%; object-fit:cover; aspect-ratio: 16/8; border-radius: var(--radius); }
.food-points{
  display:grid; grid-template-columns: repeat(2,1fr); gap: 36px 48px;
  max-width: 820px; margin: 0 auto 56px;
}
.food-point p{ max-width: none; }
.food-note{ color: var(--c-text-soft); font-family: var(--f-heading); }

/* ---------------- Experience gallery ---------------- */
.experience-gallery{
  display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:56px;
}
.exp-item img,
.exp-item .media-placeholder{ aspect-ratio: 3/4; margin-bottom:14px; width:100%; object-fit:cover; border-radius: var(--radius); }
.exp-item p{ text-align:center; margin:0 auto; font-size:0.9rem; color: var(--c-text-soft); }

/* ---------------- Instagram / Shop CTA ---------------- */
.instagram, .shop-cta{ text-align:center; }
.shop-cta{ background: var(--c-base-2); }

/* ---------------- Footer ---------------- */
.site-footer{ background: var(--c-text); color: var(--c-base); padding: 80px 24px 32px; }
.footer-inner{
  max-width: var(--content-w); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:56px; justify-content:space-between;
  padding-bottom: 48px; border-bottom: 1px solid rgba(248,246,242,0.18);
}
.footer-brand{ max-width: 320px; }
.footer-logo{ width:130px; margin-bottom:16px; }
.footer-brand p{ color: rgba(248,246,242,0.7); font-size:0.9rem; }
.footer-links{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h4{ font-family: var(--f-en); font-size:0.75rem; letter-spacing:0.14em; color: rgba(248,246,242,0.5); margin-bottom:16px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:0.9rem; }
.footer-col a:hover{ color: var(--c-brand); }
.footer-company, .footer-contact{
  max-width: var(--content-w); margin: 24px auto 0; font-size:0.82rem; color: rgba(248,246,242,0.6);
}
.footer-copy{
  max-width: var(--content-w); margin: 24px auto 0; font-size:0.75rem; color: rgba(248,246,242,0.4);
}

/* ---------------- Reveal animation ---------------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 880px){
  .main-nav{
    position:fixed; inset: 64px 0 0 0; background: var(--c-base);
    transform: translateX(100%); transition: transform .4s ease;
    padding: 40px 24px; overflow-y:auto;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; gap:28px; }
  .main-nav a{ align-items:flex-start; flex-direction:row; gap:10px; font-size:1.05rem; }
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:32px; height:32px; background:none; border:none; cursor:pointer; z-index:101;
  }
  .nav-toggle span{ width:100%; height:1px; background: var(--c-text); }
  .cta-shop{ padding: 7px 14px; font-size:0.72rem; }

  .grid-2, .grid-2.reverse{ grid-template-columns: 1fr; }
  .grid-2.reverse .col-media, .grid-2.reverse .col-text{ order:initial; }
  .philosophy-grid{ grid-template-columns: 1fr; }
  .food-points{ grid-template-columns: 1fr; }
  .experience-gallery{ grid-template-columns: 1fr 1fr; }
  .experience-gallery .exp-item:last-child{ grid-column: span 2; }

  h1{ font-size: 1.9rem; }
  .lead{ font-size:1.1rem; }
  .section{ padding: 88px 20px; }
}

@media (max-width: 480px){
  .experience-gallery{ grid-template-columns: 1fr; }
  .experience-gallery .exp-item:last-child{ grid-column: auto; }
  .hero-content{ padding-bottom: 64px; }
}