@charset "UTF-8";

/*
 * SHE SAID SO — Hakodate Café
 * Visual Impact + Bold Typography
 * Font: Anton (condensed, American signage)
 * Colors: White walls, warm wood, charcoal accents
 */

:root {
  --bg: #F5F3F0;
  --bg2: #EDEBE7;
  --bg-dark: #181614;
  --w: #FFFFFF;
  --b: #111111;
  --b2: #666666;
  --b3: #999999;
  --line: #E2DFD9;
  --accent: #B08550;
  --ff-h: 'Archivo Black','Helvetica Neue',Arial,sans-serif;
  --ff-b: 'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  --ff-btn: 'Barlow','Helvetica Neue',Arial,sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%;scroll-behavior:smooth}
body{
  font-family:var(--ff-b);
  font-size:1.5rem;line-height:1.8;
  color:var(--b);background:var(--bg);
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;transition:color .2s ease}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}

/* ── Typography ── */
h1,h2,h3,h4{
  font-family:var(--ff-h);
  font-weight:900;line-height:1.05;
  text-transform:uppercase;
  letter-spacing:-.015em;
  color:var(--b);
}
h1{font-size:clamp(3.2rem,7vw,5.6rem)}
h2{font-size:clamp(2.4rem,5vw,4rem)}
h3{font-size:clamp(1.8rem,3vw,2.6rem)}

.ri{opacity:0;transform:translateY(40px);transition:all .9s var(--ease)}
.ri.on{opacity:1;transform:translateY(0)}

/* ═══════════════════════════════════════
   HEADER
   ═══════════════════════════════════════ */
.hdr{
  position:fixed;inset:0 0 auto 0;height:70px;z-index:1000;
  background:rgba(245,243,240,.95);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;
}
.hdr__n{width:100%;max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(2rem,5vw,4rem)}
.hdr__brand img{height:48px;width:auto;display:block;transition:opacity .2s}
.hdr__brand:hover img{opacity:.7}
.hdr__links{display:flex;gap:2.8rem}
.hdr__links a{
  font-family:var(--ff-b);
  font-size:1.1rem;letter-spacing:.12em;color:var(--b2);
  position:relative;
  transition:color .2s ease;
}
.hdr__links a::after{
  content:'';position:absolute;left:0;bottom:-4px;
  width:0;height:2px;background:var(--b);
  transition:width .3s var(--ease);
}
.hdr__links a:hover{color:var(--b)}
.hdr__links a:hover::after{width:100%}

.bur{display:none;width:28px;height:18px;position:relative;background:none;border:none;cursor:pointer}
.bur i{display:block;width:100%;height:1.5px;background:var(--b);position:absolute;border-radius:1px;transition:all .3s}
.bur i:nth-child(1){top:0}.bur i:nth-child(2){top:50%;transform:translateY(-50%)}.bur i:nth-child(3){bottom:0}

@media(max-width:768px){
  .bur{display:block}
  .hdr__links{display:none;position:fixed;inset:70px 0 0 0;background:var(--w);flex-direction:column;align-items:center;justify-content:center;gap:2.4rem;z-index:999;border-top:1px solid var(--line)}
  .hdr__links.open{display:flex}
  .hdr__links a{font-family:var(--ff-h);font-size:1.6rem;letter-spacing:.15em;color:var(--b)}
}

/* ═══════════════════════════════════════
   HERO — Dramatic full-bleed with bold overlay
   ═══════════════════════════════════════ */
.hero{
  position:relative;height:100vh;min-height:560px;
  overflow:hidden;background:var(--bg-dark);
}
.hero__bg{position:absolute;inset:0}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:brightness(.7) saturate(.85);
}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,22,20,.2) 0%,rgba(24,22,20,.6) 70%,rgba(24,22,20,.85) 100%);
}
.hero__inner{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:clamp(3rem,6vw,5rem) clamp(2rem,5vw,4rem);
  max-width:1400px;margin:0 auto;
}
.hero__tag{
  font-family:var(--ff-b);
  font-size:1.05rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--b2);margin-bottom:1.2rem;
}
.hero h1{
  color:#FFF;font-size:clamp(3.6rem,8vw,6.4rem);
  letter-spacing:-.02em;
  animation:fu .8s both .2s;
}
.hero__sub{
  font-size:clamp(1.3rem,2vw,1.6rem);
  color:rgba(255,255,255,.55);
  margin-top:1rem;max-width:500px;line-height:1.7;
  animation:fu .8s both .5s;
}
@keyframes fu{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* Scroll indicator */
.hero__scroll{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:.8rem;
}
.hero__scroll span{
  font-family:var(--ff-h);
  font-size:1rem;letter-spacing:.3em;color:rgba(255,255,255,.6);
}
.hero__scroll i{
  display:block;width:1px;height:32px;
  background:rgba(255,255,255,.35);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ═══════════════════════════════════════
   WELCOME SECTION
   ═══════════════════════════════════════ */
.welcome{
  text-align:center;padding:clamp(8rem,14vw,10rem) clamp(2rem,5vw,4rem);
  background:var(--w);
}
.welcome__line{width:64px;height:4px;background:var(--b);margin:0 auto 2.4rem}
.welcome h2{margin-bottom:1.8rem;color:var(--b)}
.welcome__txt{
  font-size:1.5rem;color:var(--b2);max-width:640px;
  margin:0 auto 3rem;line-height:1.9;
}
.welcome__cta{
  font-family:var(--ff-h);
  font-size:1.25rem;letter-spacing:.15em;color:var(--b);
  padding-bottom:.4rem;
  border-bottom:2px solid var(--b);
  display:inline-block;
  transition:opacity .2s ease;
}
.welcome__cta:hover{opacity:.5}

/* ═══════════════════════════════════════
   FEATURE CARDS — 4 cards with visual impact
   ═══════════════════════════════════════ */
.feat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.2rem;
  max-width:1400px;margin:0 auto;
  padding:clamp(4rem,8vw,6rem) clamp(2rem,5vw,4rem) clamp(6rem,12vw,10rem);
}
.feat{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;
  cursor:pointer;
  border-radius:2px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.feat:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 60px rgba(0,0,0,.12);
}
.feat__bg{
  position:absolute;inset:0;overflow:hidden;
}
.feat__bg img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.85) saturate(.8);
  transition:transform .8s var(--ease),filter .6s ease;
}
.feat:hover .feat__bg img{transform:scale(1.08);filter:brightness(1) saturate(1)}
.feat__body{
  position:absolute;inset:auto 0 0 0;
  background:linear-gradient(0deg,rgba(17,17,17,.9) 0%,rgba(17,17,17,.4) 70%,transparent 100%);
  padding:clamp(2rem,4vw,3rem);
  color:#FFF;
  z-index:2;
}
.feat__label{
  font-family:var(--ff-h);
  font-size:1.1rem;letter-spacing:.2em;color:var(--b2);
  margin-bottom:.6rem;
}
.feat h3{
  font-family:var(--ff-h);
  font-size:clamp(1.8rem,3vw,2.6rem);
  margin-bottom:.4rem;color:#FFF;
  letter-spacing:-.015em;
}
.feat__desc{font-size:1.3rem;color:rgba(255,255,255,.55);line-height:1.7;max-width:90%}

@media(max-width:1024px){.feat-grid{grid-template-columns:repeat(2,1fr)}.feat{aspect-ratio:4/3}}
@media(max-width:600px){.feat-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════
   CTA SECTIONS
   ═══════════════════════════════════════ */
.cta{
  text-align:center;
  padding:clamp(8rem,14vw,10rem) clamp(2rem,5vw,4rem);
  background:var(--bg);
}
.cta__line{width:64px;height:4px;background:var(--b);margin:0 auto 2.4rem}
.cta h2{margin-bottom:1.8rem}
.cta p{font-size:1.5rem;color:var(--b2);max-width:500px;margin:0 auto 2.4rem;line-height:1.8}

/* ═══════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════ */
.ph{
  position:relative;height:240px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);
  border-bottom:1px solid var(--line);
}
.ph__tag{
  font-family:var(--ff-b);
  font-size:1rem;letter-spacing:.3em;text-transform:uppercase;color:var(--b3);
}
.ph h1{margin-top:.6rem;color:var(--b);letter-spacing:-.03em}

/* ═══════════════════════════════════════
   CONCEPT PAGE
   ═══════════════════════════════════════ */
.c-main{max-width:800px;margin:0 auto;padding:clamp(6rem,12vw,8rem) clamp(2rem,5vw,4rem)}
.c-main h2{
  font-family:var(--ff-h);
  font-size:clamp(2.4rem,4.5vw,3.6rem);
  margin:clamp(3rem,6vw,5rem) 0 2rem;
}
.c-main p{font-size:1.5rem;color:var(--b2);line-height:2;margin-bottom:1.6rem}
.c-fw{padding:0 clamp(2rem,5vw,4rem);max-width:1360px;margin:0 auto}
.c-fw img{width:100%;aspect-ratio:21/8;object-fit:cover;filter:saturate(.8) contrast(1.05)}
.c-g2{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;padding:2rem clamp(2rem,5vw,4rem);max-width:1360px;margin:0 auto}
.c-g2 img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.85)}
.c-end{text-align:center;padding:6rem clamp(2rem,5vw,4rem)}
.c-end p{
  font-family:var(--ff-h);
  font-size:clamp(2rem,4vw,3rem);color:var(--b2);
  letter-spacing:.1em;
}
@media(max-width:700px){.c-g2{grid-template-columns:1fr}}

/* ═══════════════════════════════════════
   MENU — Bold, uniform cards
   ═══════════════════════════════════════ */
.m-tabs{display:flex;justify-content:center;gap:.6rem;padding:clamp(3rem,6vw,4rem) clamp(2rem,5vw,4rem);flex-wrap:wrap}
.m-tab{
  padding:.8rem 2rem;
  font-family:var(--ff-h);
  font-size:1.15rem;letter-spacing:.12em;color:var(--b2);
  border:none;background:transparent;cursor:pointer;
  transition:all .2s ease;
  border-bottom:2px solid transparent;
}
.m-tab:hover{color:var(--b);border-bottom-color:var(--b3)}
.m-tab.act{color:var(--b);border-bottom-color:var(--b)}

.m-pane{display:none}
.m-pane.act{display:block;max-width:1100px;margin:0 auto;padding:0 clamp(2rem,5vw,4rem) clamp(6rem,12vw,8rem)}
.m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.m-i{text-align:center}
.m-i__img{
  aspect-ratio:4/3;
  overflow:hidden;border-radius:2px;margin-bottom:1.2rem;
  background:var(--b);
}
.m-i__img img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.9);
  transition:transform .5s var(--ease),filter .4s ease;
}
.m-i:hover .m-i__img img{transform:scale(1.05);filter:saturate(1)}
.m-i__name{
  font-family:var(--ff-h);
  font-size:1.7rem;margin-bottom:.3rem;
  letter-spacing:.01em;
}
.m-i__pri{font-size:1.3rem;color:var(--b3)}

@media(max-width:800px){.m-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem}}
@media(max-width:480px){.m-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}}

/* ═══════════════════════════════════════
   GALLERY — Uniform 3-column grid
   ═══════════════════════════════════════ */
.g-body{padding:3rem clamp(2rem,5vw,4rem) clamp(5rem,10vw,7rem);max-width:1400px;margin:0 auto}
.g-m{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.g-m__i{
  aspect-ratio:1/1;
  border-radius:2px;overflow:hidden;
}
.g-m__i img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.8);
  transition:transform .5s var(--ease),filter .3s ease;
}
.g-m__i:hover img{transform:scale(1.04);filter:saturate(1)}

@media(max-width:768px){.g-m{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.g-m{gap:0.6rem}}

/* ═══════════════════════════════════════
   ACCESS
   ═══════════════════════════════════════ */
.a-body{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(3rem,6vw,5rem);
  padding:clamp(6rem,12vw,8rem) clamp(2rem,5vw,4rem);
  max-width:1100px;margin:0 auto;align-items:start;
}
.a-tbl{width:100%;border-collapse:collapse}
.a-tbl th{
  padding:.8rem 1.2rem .8rem 0;
  font-family:var(--ff-b);
  font-size:1rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--b2);vertical-align:top;border-bottom:1px solid var(--line);
  text-align:left;width:120px;font-weight:400;
}
.a-tbl td{
  padding:.8rem 0;border-bottom:1px solid var(--line);
  line-height:1.8;font-size:1.35rem;
}
.a-map{width:100%;aspect-ratio:4/3;border-radius:2px;overflow:hidden;position:sticky;top:calc(70px + 2rem)}
.a-map iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05) brightness(.9)}
@media(max-width:800px){.a-body{grid-template-columns:1fr}.a-map{position:static}}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.ftr{
  background:var(--w);border-top:1px solid var(--line);
  color:var(--b2);text-align:center;
  padding:2.4rem clamp(2rem,5vw,4rem);
}
.ftr__c{font-family:var(--ff-b);font-size:1.05rem;letter-spacing:.1em}

/* STRIP */
.strip{padding:0;background:var(--w);overflow:hidden}
.strip__grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;min-height:420px}
.strip__grid--rev .strip__img:first-child{order:3}
.strip__grid--rev .strip__img:last-child{order:1}
.strip__grid--rev .strip__info{order:2}
.strip__img{background-size:cover;background-position:center;background-color:var(--bg2);min-height:420px;transition:filter .5s ease}
.strip__img:hover{filter:brightness(1.1) saturate(1.1)}
.strip__info{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(2.4rem,5vw,4rem);text-align:center}
.strip__info p{font-size:1.45rem;line-height:1.9;color:var(--b2);max-width:420px}
.strip--dark{background:var(--b)}
.strip--dark .strip__img{background-color:#222}
.strip__info h2{font-family:var(--ff-h);font-size:clamp(3rem,5.5vw,5rem);font-weight:900;margin-bottom:1.6rem;line-height:1.1;color:var(--b);letter-spacing:-.02em}
.strip--dark .strip__info h2{color:#FFF;font-family:var(--ff-h);font-weight:900}
.strip--dark .strip__info p{color:rgba(255,255,255,.55)}
@media(max-width:768px){.strip__grid{grid-template-columns:1fr!important;min-height:auto}.strip__img{min-height:280px}}

/* DYNAMIC CTA */
.cta{text-align:center;padding:clamp(6rem,12vw,10rem) clamp(2rem,5vw,4rem);background:var(--bg);position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:400px;background:radial-gradient(circle,rgba(176,133,80,.08) 0%,transparent 70%);pointer-events:none}
.cta__line{width:64px;height:4px;background:var(--b);margin:0 auto 2.4rem}
.cta h2{margin-bottom:1.8rem;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.02em}
.cta p{font-size:1.5rem;color:var(--b2);max-width:500px;margin:0 auto 2.4rem;line-height:1.8;position:relative;z-index:1}
.cta__btn{font-family:var(--ff-h);font-size:1.3rem;letter-spacing:.12em;color:#FFF;background:var(--b);padding:1rem 2.4rem;display:inline-block;transition:all .3s ease;position:relative;z-index:1}
.cta__btn:hover{background:var(--accent);transform:translateY(-2px)}

/* DARK FOOTER */
.ftr{background:var(--b);color:rgba(255,255,255,.4);text-align:center;padding:3rem clamp(2rem,5vw,4rem);border:none}
.ftr__c{font-family:var(--ff-h);font-size:1.1rem;letter-spacing:.15em}

/* X-CTA Full-bleed */
.xcta{position:relative;min-height:480px;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;background-attachment:fixed;overflow:hidden}
.xcta::before{content:"";position:absolute;inset:0;background:inherit;filter:blur(8px) brightness(.6);transform:scale(1.05)}
.xcta__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.7),rgba(17,17,17,.9))}
.xcta__content{position:relative;z-index:2;text-align:center;padding:clamp(4rem,8vw,6rem) clamp(2rem,5vw,4rem)}
.xcta__tag{font-family:var(--ff-b);font-size:1rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.45);display:block;margin-bottom:1.6rem}
.xcta h2{font-family:var(--ff-h);font-size:clamp(3.2rem,7vw,5.6rem);color:#FFF;margin-bottom:2.4rem;letter-spacing:-.015em;line-height:1.05}
.xcta p{font-size:1.45rem;color:var(--b2);margin-bottom:2.4rem}
.xcta__btn{font-family:var(--ff-btn);font-size:1.15rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--b);background:#FFF;padding:1rem 2.4rem;display:inline-block;position:relative;transition:all .3s ease}
.xcta__btn::after{content:'';position:absolute;inset:0;border:2px solid #FFF;transform:translate(6px,6px);transition:transform .3s ease}
.xcta__btn:hover{background:var(--accent);color:#FFF}
.xcta__btn:hover::after{transform:translate(0,0)}
@media(max-width:768px){.xcta{background-attachment:scroll;min-height:400px}.xcta h2{font-size:clamp(2.4rem,6vw,4rem)}}

/* Hide old CTA */
.cta{display:none}

/* Dark footer */
.ftr{background:var(--b);color:rgba(255,255,255,.4);text-align:center;padding:3rem clamp(2rem,5vw,4rem);border:none}
.ftr__c{font-family:var(--ff-h);font-size:1.1rem;letter-spacing:.15em}