/* ============================================================
   Atelier Saké — 制作サンプル集 (Portfolio)
   French atelier × Japanese minimal
   ============================================================ */

:root{
  --navy:#0E1A2B;
  --navy-soft:#1b2c44;
  --offwhite:#F7F4ED;
  --red:#7B2D26;
  --gray:#8B8276;

  --page:#F4F0E7;       /* dominant page surface */
  --panel:#EAE4D7;      /* stage backdrop seating the mocks */
  --paper:#FCFAF4;      /* lightest — the artifact paper */

  --ink-90:#23303f;
  --line:rgba(14,26,43,.14);

  --serif:'Noto Serif JP', serif;
  --sans:'Noto Sans JP', sans-serif;
  --latin:'Cormorant Garamond', serif;

  --wrap:1180px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--page);
  color:var(--navy);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.7;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(22px,5vw,56px);}

/* shared motifs ------------------------------------------------ */
.diamond{display:inline-block;width:7px;height:7px;background:var(--red);transform:rotate(45deg);flex:none;}
.eyebrow{
  font-family:var(--latin);font-style:italic;font-weight:500;
  font-size:clamp(16px,1.5vw,19px);letter-spacing:.14em;color:var(--red);
}
.kicker{
  font-family:var(--latin);font-weight:500;font-size:13px;letter-spacing:.36em;
  text-transform:uppercase;color:var(--gray);
}
.hairline{height:1px;background:var(--line);border:0;width:100%;}

/* ============================================================
   HEADER
   ============================================================ */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 0 0;
}
.topbar .brand img{height:34px;width:auto;mix-blend-mode:multiply;}
.topbar .note{
  font-family:var(--latin);font-style:italic;font-size:14px;letter-spacing:.08em;color:var(--gray);white-space:nowrap;
}

.hero{
  text-align:center;
  padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,64px);
  position:relative;
}
.hero .eyebrow{display:inline-flex;align-items:center;gap:13px;margin-bottom:26px;}
.hero .eyebrow::before,.hero .eyebrow::after{content:"";width:34px;height:1px;background:var(--red);opacity:.55;}
.hero h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(40px,7vw,76px);letter-spacing:.14em;line-height:1.18;
  color:var(--navy);text-indent:.14em;
}
.hero .sub{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(17px,2.1vw,23px);letter-spacing:.1em;color:var(--ink-90);
  margin-top:26px;
}
.hero .lead{
  max-width:680px;margin:30px auto 0;
  font-size:clamp(14px,1.5vw,15.5px);letter-spacing:.03em;line-height:2.15;
  color:#4b5563;text-wrap:pretty;
}
.hero .lead em{font-family:var(--latin);font-style:italic;color:var(--red);font-size:1.12em;letter-spacing:.04em;}

/* index legend (what's inside) */
.legend{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;
  max-width:860px;margin:48px auto 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.legend a{
  flex:1 1 auto;min-width:150px;text-align:center;text-decoration:none;color:var(--navy);
  padding:20px 16px;position:relative;transition:background .25s;
}
.legend a + a::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:1px;background:var(--line);}
.legend a:hover{background:rgba(123,45,38,.045);}
.legend .ln{font-family:var(--latin);font-size:15px;letter-spacing:.22em;color:var(--red);display:block;margin-bottom:8px;}
.legend .lt{font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.08em;}

/* ============================================================
   SAMPLE SECTION SCAFFOLD
   ============================================================ */
.sample{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--line);}
.sample:first-of-type{border-top:0;}

.sample-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:start;}
.sample-num{
  font-family:var(--latin);font-weight:500;font-size:clamp(64px,9vw,116px);
  line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(123,45,38,.5);
  letter-spacing:.02em;
}
.sample-head .meta{padding-top:6px;}
.sample-head .cat{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.sample-head .cat .eyebrow{letter-spacing:.16em;}
.sample-head .cat .tag{
  font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.16em;
  color:var(--gray);border:1px solid var(--line);border-radius:999px;padding:4px 12px;
  white-space:nowrap;
}
.sample-head h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(26px,3.6vw,40px);letter-spacing:.06em;line-height:1.3;color:var(--navy);
}
.sample-head .client{
  margin-top:12px;font-size:14px;letter-spacing:.04em;color:#54606e;
}
.sample-head .client b{font-weight:500;color:var(--navy);}

/* body: meta column + visual stage */
.sample-body{
  margin-top:clamp(34px,5vw,56px);
  display:grid;grid-template-columns:300px 1fr;gap:clamp(34px,5vw,72px);align-items:start;
}
.sample.flip .sample-body{grid-template-columns:1fr 300px;}
.sample.flip .sample-body .desc{order:2;}
.sample.flip .sample-body .stage-wrap{order:1;}
.sample.wide .sample-body{grid-template-columns:1fr;}

.desc{}
.desc .body{
  font-size:15px;letter-spacing:.02em;line-height:2.05;color:#46525f;text-wrap:pretty;
}
.desc .body + .point{margin-top:26px;}

/* the deep-red "why it works" note */
.point{
  border:1.4px solid var(--red);background:rgba(123,45,38,.05);
  padding:20px 22px;position:relative;
}
.point .lbl{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.18em;color:var(--red);
  margin-bottom:11px;
}
.point p{
  font-family:var(--serif);font-weight:500;font-size:15.5px;line-height:1.95;letter-spacing:.03em;
  color:var(--ink-90);text-wrap:pretty;
}
.point p .hl{color:var(--red);}

.disclaim{
  margin-top:18px;font-size:11.5px;letter-spacing:.08em;color:#9a9488;
  font-family:var(--sans);font-weight:300;
}
.disclaim::before{content:"※ ";color:var(--gray);}

/* stage that seats the artifact */
.stage-wrap{min-width:0;}
.stage{
  background:var(--panel);
  border:1px solid rgba(14,26,43,.08);
  padding:clamp(28px,4vw,52px);
  display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,44px);
  align-items:center;justify-content:center;
  position:relative;
}
.stage::after{
  content:"";position:absolute;inset:9px;border:1px solid rgba(14,26,43,.06);pointer-events:none;
}
.cap{
  margin-top:14px;text-align:center;
  font-family:var(--latin);font-style:italic;font-size:13.5px;letter-spacing:.07em;color:var(--gray);
}
.cap .jp{font-family:var(--serif);font-style:normal;font-size:12.5px;letter-spacing:.1em;}

/* ---- photographic mockup presentation ---- */
.shot{margin:0;display:flex;justify-content:center;}
.shot img{
  width:100%;height:auto;display:block;
  box-shadow:0 48px 90px -46px rgba(14,26,43,.55),0 14px 34px -22px rgba(14,26,43,.32);
}
.shot.tall img{width:auto;max-width:100%;max-height:760px;margin-inline:auto;}
.shot.framed img{border:1px solid var(--line);}
.shot.wide-shot img{max-width:1080px;margin-inline:auto;}

/* fit-to-width scaler */
.scaler{width:100%;display:flex;justify-content:center;align-items:flex-start;}
.scaler > *{transform-origin:top center;}

/* ============================================================
   MOCK — paper base
   ============================================================ */
.paper{
  background:var(--paper);
  box-shadow:0 30px 60px -34px rgba(14,26,43,.55),0 6px 16px -10px rgba(14,26,43,.25);
  position:relative;flex:none;
}

/* ---- ① FRONT LABEL (表) — single-ink 藍, vertical -------------- */
.front-label{
  width:288px;height:512px;padding:34px;
  display:flex;align-items:stretch;justify-content:center;
}
.front-label .frame{
  flex:1;border:1px solid rgba(14,26,43,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:30px 0;position:relative;
}
.front-label .frame::before{
  content:"";position:absolute;inset:6px;border:1px solid rgba(14,26,43,.16);pointer-events:none;
}
.front-label .topmark{
  font-family:var(--latin);font-size:11px;letter-spacing:.34em;color:rgba(14,26,43,.5);text-transform:uppercase;
}
.front-label .namearea{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:20px;}
.front-label .name{
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--serif);font-weight:600;font-size:82px;line-height:1.02;
  color:var(--navy);
}
.front-label .name span{display:block;}
.front-label .grade{
  writing-mode:vertical-rl;font-family:var(--serif);font-weight:500;
  font-size:15px;letter-spacing:.42em;color:rgba(14,26,43,.72);align-self:center;margin-top:6px;
}
.front-label .seal{
  width:30px;height:30px;border:1.4px solid var(--navy);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:13px;color:var(--navy);
}

/* ---- ① BACK LABEL (裏) — brand applied ----------------------- */
.back-label{
  width:352px;min-height:512px;padding:34px 34px 26px;
  display:flex;flex-direction:column;
}
.back-label::before{content:"";position:absolute;inset:13px;border:1px solid rgba(14,26,43,.16);pointer-events:none;}
.back-label .ey{display:flex;align-items:center;gap:10px;
  font-family:var(--latin);font-style:italic;font-weight:500;font-size:14px;letter-spacing:.1em;color:var(--red);}
.back-label .nm{font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:.06em;color:var(--navy);margin-top:12px;}
.back-label .nm .rd{font-size:13.5px;color:var(--gray);letter-spacing:.08em;}
.back-label .catch{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.45;letter-spacing:.03em;color:var(--navy);margin-top:10px;}
.back-label .catch .hl{color:var(--red);}
.back-label .rule{width:46px;height:2px;background:var(--red);margin-top:16px;}
.back-label .body{font-family:var(--sans);font-weight:300;font-size:13px;line-height:1.85;letter-spacing:.03em;color:var(--ink-90);margin-top:16px;text-wrap:pretty;}
.back-label .taste{
  display:grid;grid-template-columns:1fr 1px 1fr;margin-top:auto;
  border:1.3px solid var(--red);background:rgba(123,45,38,.05);
}
.back-label .taste .cell{padding:12px 15px;display:flex;flex-direction:column;gap:6px;}
.back-label .taste .div{background:rgba(123,45,38,.22);}
.back-label .taste .l{display:inline-flex;align-items:center;gap:6px;font-family:var(--serif);font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--red);}
.back-label .taste .l::before{content:"";width:4px;height:4px;background:var(--red);transform:rotate(45deg);}
.back-label .taste .v{font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:.03em;color:var(--navy);}
.back-label .spec{font-family:var(--sans);font-weight:300;font-size:11.5px;letter-spacing:.08em;color:var(--gray);margin-top:14px;font-variant-numeric:tabular-nums;}
.back-label .foot{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px;}
.back-label .foot .dash{width:30px;height:1px;background:rgba(14,26,43,.3);}
.back-label .foot img{width:134px;mix-blend-mode:multiply;opacity:.9;}

/* ---- ② DRINK MENU ------------------------------------------- */
.menu{
  width:528px;min-height:748px;padding:50px 46px 34px;
  display:flex;flex-direction:column;
}
.menu::before{content:"";position:absolute;inset:14px;border:1px solid rgba(14,26,43,.16);pointer-events:none;}
.menu .mh{text-align:center;margin-bottom:30px;}
.menu .mh .ey{font-family:var(--latin);font-style:italic;font-weight:500;font-size:16px;letter-spacing:.12em;color:var(--red);}
.menu .mh .ja{font-family:var(--serif);font-weight:600;font-size:27px;letter-spacing:.06em;color:var(--navy);margin-top:12px;}
.menu .mh .en{font-family:var(--latin);font-weight:500;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gray);margin-top:10px;}
.menu .body{flex:1;display:flex;flex-direction:column;gap:18px;justify-content:space-between;}
.menu .sec-h{display:flex;align-items:baseline;gap:11px;margin-bottom:7px;}
.menu .sec-h .jp{font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:.06em;color:var(--red);white-space:nowrap;}
.menu .sec-h .en{font-family:var(--latin);font-style:italic;font-weight:500;font-size:13px;letter-spacing:.04em;color:var(--gray);white-space:nowrap;}
.menu .sec-h .ln{flex:1;height:1px;background:linear-gradient(to right,rgba(123,45,38,.32),rgba(123,45,38,0));}
.menu .item{display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:baseline;padding-left:18px;}
.menu .item .nm{font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:.04em;color:var(--navy);}
.menu .item .pr{font-family:var(--latin);font-weight:600;font-size:18px;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap;}
.menu .item .cm{grid-column:1/-1;font-family:var(--sans);font-weight:300;font-size:12.5px;line-height:1.6;color:var(--gray);margin-top:3px;}
.menu .tasting{margin-top:4px;border:1.3px solid var(--red);background:rgba(123,45,38,.05);padding:15px 20px;display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:center;}
.menu .tasting .lead{display:flex;align-items:center;gap:9px;}
.menu .tasting .arw{color:var(--red);font-size:13px;}
.menu .tasting .ti{font-family:var(--serif);font-weight:600;font-size:15.5px;letter-spacing:.04em;color:var(--red);}
.menu .tasting .pr{font-family:var(--latin);font-weight:600;font-size:18px;color:var(--red);font-variant-numeric:tabular-nums;}
.menu .tasting .cm{grid-column:1/-1;font-family:var(--sans);font-weight:300;font-size:12px;color:var(--navy);opacity:.78;margin-top:4px;}
.menu .foot{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px;}
.menu .foot .dash{width:30px;height:1px;background:rgba(14,26,43,.3);}
.menu .foot img{width:160px;mix-blend-mode:multiply;opacity:.9;}

/* ---- ③ LOGO BOARD ------------------------------------------- */
.logoboard{width:680px;display:flex;flex-direction:column;gap:26px;}
.logo-primary{
  background:var(--paper);box-shadow:0 30px 60px -34px rgba(14,26,43,.5);
  padding:58px 40px;display:flex;align-items:center;justify-content:center;gap:36px;position:relative;
}
.logo-primary::after{content:"";position:absolute;inset:10px;border:1px solid rgba(14,26,43,.1);pointer-events:none;}
.sakazuki{position:relative;flex:none;display:inline-flex;color:var(--navy);}
.sakazuki .cup{width:92px;height:auto;display:block;}
.sakazuki .drop{position:absolute;top:-3px;left:50%;transform:translateX(-50%) rotate(45deg);width:6px;height:6px;background:var(--red);}
.logo-primary .sakazuki .cup{width:104px;}
.lv .sakazuki .cup,.lockup-v .sakazuki .cup{width:60px;}
.logotype{font-family:var(--serif);font-weight:600;letter-spacing:.16em;color:var(--navy);line-height:1;white-space:nowrap;}
.logo-primary .logotype{font-size:52px;}
.logo-primary .lt-wrap{display:flex;flex-direction:column;gap:12px;}
.logo-primary .lt-en{font-family:var(--latin);font-style:italic;font-size:15px;letter-spacing:.22em;color:var(--gray);}

.logo-variants{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.lv{padding:32px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;position:relative;min-height:170px;}
.lv .vlabel{position:absolute;left:14px;top:12px;font-family:var(--latin);font-size:10px;letter-spacing:.22em;text-transform:uppercase;}
.lv.light{background:var(--paper);box-shadow:0 18px 40px -30px rgba(14,26,43,.5);}
.lv.light .vlabel{color:var(--gray);}
.lv.dark{background:var(--navy);}
.lv.dark .vlabel{color:rgba(247,244,237,.5);}
.lv.mono{background:var(--paper);box-shadow:0 18px 40px -30px rgba(14,26,43,.5);}
.lv.mono .vlabel{color:var(--gray);}

/* vertical lockup */
.lockup-v{display:flex;flex-direction:column;align-items:center;gap:12px;}
.lockup-v .logotype-v{writing-mode:vertical-rl;font-family:var(--serif);font-weight:600;font-size:26px;letter-spacing:.2em;color:var(--navy);}

/* dark + mono recolors */
.lv.dark .sakazuki{color:var(--offwhite);}
.lv.dark .sakazuki .drop{background:var(--offwhite);}
.lv.dark .sakazuki .sake{display:none;}
.lv.dark .logotype,.lv.dark .logotype-v{color:var(--offwhite);}
.lv.mono .sakazuki{color:var(--navy);}
.lv.mono .sakazuki .drop{background:var(--navy);}
.lv.mono .sakazuki .sake{display:none;}
.lv .logotype{font-size:26px;}

/* ---- ④ STORE POP (shelf tag) -------------------------------- */
.pop{
  width:312px;min-height:556px;padding:0;display:flex;flex-direction:column;align-items:stretch;
  filter:drop-shadow(0 30px 50px rgba(14,26,43,.35));
  background:transparent;box-shadow:none;
}
.pop .card{
  background:var(--paper);flex:1;display:flex;flex-direction:column;
  padding:30px 30px 26px;position:relative;
  clip-path:polygon(0 34px,calc(50% - 26px) 34px,calc(50% - 22px) 0,calc(50% + 22px) 0,calc(50% + 26px) 34px,100% 34px,100% 100%,0 100%);
}
.pop .hole{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:var(--panel);box-shadow:inset 0 1px 2px rgba(14,26,43,.4);}
.pop .inner{border:1px solid rgba(14,26,43,.14);flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 22px 24px;margin-top:14px;}
.pop .badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:600;font-size:13px;letter-spacing:.16em;color:var(--red);}
.pop .badge::before,.pop .badge::after{content:"";width:14px;height:1px;background:var(--red);}
.pop .pname{font-family:var(--serif);font-weight:600;font-size:27px;letter-spacing:.08em;color:var(--navy);margin-top:20px;line-height:1.4;}
.pop .pname .rd{display:block;font-size:13px;letter-spacing:.18em;color:var(--gray);margin-top:6px;}
.pop .rule{width:40px;height:2px;background:var(--red);margin:20px 0;}
.pop .catch{font-family:var(--serif);font-weight:500;font-size:16.5px;line-height:2;letter-spacing:.04em;color:var(--ink-90);text-wrap:pretty;}
.pop .tags{margin-top:auto;display:flex;flex-direction:column;gap:10px;width:100%;padding-top:24px;}
.pop .tags .t{display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:400;font-size:12.5px;letter-spacing:.1em;color:#54606e;}
.pop .tags .t .d{width:4px;height:4px;background:var(--red);transform:rotate(45deg);}
.pop .price{font-family:var(--latin);font-weight:600;font-size:30px;letter-spacing:.02em;color:var(--navy);margin-top:18px;}
.pop .price .y{font-family:var(--serif);font-size:16px;letter-spacing:.06em;}
.pop .mark{margin-top:18px;}
.pop .mark img{width:30px;mix-blend-mode:multiply;opacity:.55;}

/* ---- ⑤ SNS TEMPLATES ---------------------------------------- */
.sns-row{display:flex;gap:22px;flex-wrap:nowrap;justify-content:center;width:1054px;}
.sns{
  width:330px;height:330px;background:var(--paper);
  box-shadow:0 26px 50px -30px rgba(14,26,43,.5);
  padding:26px;display:flex;flex-direction:column;position:relative;flex:none;
}
.sns::before{content:"";position:absolute;inset:11px;border:1px solid rgba(14,26,43,.14);pointer-events:none;}
.sns .top{display:flex;align-items:center;justify-content:space-between;}
.sns .top .brand{font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:.14em;color:var(--navy);}
.sns .top .badge{font-family:var(--serif);font-weight:600;font-size:10.5px;letter-spacing:.14em;color:var(--red);border:1px solid rgba(123,45,38,.4);border-radius:999px;padding:4px 11px;white-space:nowrap;}
.sns .photo{
  flex:1;margin:16px 0;border:1px solid rgba(14,26,43,.18);
  background:
    linear-gradient(135deg,rgba(14,26,43,.04),rgba(14,26,43,.015)),
    var(--panel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative;
}
.sns .photo .ph-d{width:8px;height:8px;border:1px solid var(--gray);transform:rotate(45deg);}
.sns .photo .ph-l{font-family:var(--serif);font-weight:500;font-style:normal;font-size:12px;letter-spacing:.14em;color:var(--gray);}
.sns .photo.pair{flex-direction:row;gap:0;padding:0;overflow:hidden;}
.sns .photo.pair .half{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.sns .photo.pair .x{width:26px;display:flex;align-items:center;justify-content:center;font-family:var(--latin);font-style:italic;font-size:16px;color:var(--red);border-left:1px solid rgba(14,26,43,.18);border-right:1px solid rgba(14,26,43,.18);align-self:stretch;}
.sns .photo .mini{font-family:var(--serif);font-weight:500;font-size:11px;letter-spacing:.08em;color:#54606e;white-space:nowrap;}
.sns .info .nm{font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:.05em;color:var(--navy);}
.sns .info .cm{font-family:var(--sans);font-weight:300;font-size:11.5px;letter-spacing:.03em;color:var(--gray);margin-top:3px;line-height:1.55;}
.sns .info .row{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px;}
.sns .info .pr{font-family:var(--latin);font-weight:600;font-size:17px;color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap;}
.sns .info .pr .y{font-family:var(--serif);font-size:11px;}
.sns .info .hand{font-family:var(--latin);font-style:italic;font-size:11px;letter-spacing:.08em;color:var(--gray);}

/* ============================================================
   CTA
   ============================================================ */
.cta{background:var(--navy);color:var(--offwhite);text-align:center;padding:clamp(72px,11vw,128px) 0;position:relative;overflow:hidden;}
.cta::before{content:"";position:absolute;inset:22px;border:1px solid rgba(247,244,237,.16);pointer-events:none;}
.cta .ey{font-family:var(--latin);font-style:italic;font-weight:500;font-size:clamp(17px,2vw,21px);letter-spacing:.14em;color:rgba(247,244,237,.92);display:inline-flex;align-items:center;gap:13px;}
.cta .ey::before,.cta .ey::after{content:"";width:30px;height:1px;background:rgba(247,244,237,.4);}
.cta h2{font-family:var(--serif);font-weight:600;font-size:clamp(34px,6vw,62px);letter-spacing:.1em;line-height:1.3;margin-top:26px;text-indent:.1em;}
.cta .sub{font-size:clamp(14px,1.6vw,16px);letter-spacing:.04em;line-height:2;color:rgba(247,244,237,.75);margin-top:24px;max-width:560px;margin-left:auto;margin-right:auto;text-wrap:pretty;}
.cta .contact{display:inline-flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;align-items:center;margin-top:40px;padding-top:34px;border-top:1px solid rgba(247,244,237,.18);}
.cta .contact a{color:var(--offwhite);text-decoration:none;font-family:var(--latin);font-size:19px;letter-spacing:.08em;border-bottom:1px solid transparent;transition:border-color .2s;}
.cta .contact a:hover{border-color:rgba(247,244,237,.7);}
.cta .contact .sep{width:5px;height:5px;background:rgba(247,244,237,.55);transform:rotate(45deg);}
.cta .contact .jp{font-family:var(--sans);font-weight:300;font-size:14px;letter-spacing:.06em;color:rgba(247,244,237,.7);}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--navy);color:rgba(247,244,237,.7);border-top:1px solid rgba(247,244,237,.12);padding:clamp(56px,8vw,84px) 0 48px;text-align:center;}
.footer .logo{height:64px;width:auto;margin:0 auto 30px;}
.footer p{font-size:13.5px;letter-spacing:.05em;line-height:2;max-width:560px;margin:0 auto;text-wrap:pretty;}
.footer .contact{margin-top:22px;font-family:var(--latin);font-size:16px;letter-spacing:.1em;color:rgba(247,244,237,.85);}
.footer .contact a{color:inherit;text-decoration:none;}
.footer .copy{margin-top:8px;font-family:var(--latin);font-size:13px;letter-spacing:.16em;color:rgba(247,244,237,.5);}
.footer .fine{margin-top:30px;padding-top:24px;border-top:1px solid rgba(247,244,237,.12);font-size:11.5px;letter-spacing:.06em;color:rgba(247,244,237,.45);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .sample-body{grid-template-columns:1fr !important;}
  .sample.flip .sample-body .desc{order:0;}
  .sample.flip .sample-body .stage-wrap{order:0;}
  .desc{position:static;}
}
@media (max-width:560px){
  .legend a{flex-basis:50%;min-width:0;}
  .legend a:nth-child(odd) + a::before{display:none;}
  .topbar .note{display:none;}
}

/* ============================================================
   FEATURE: REBRAND CASE (Shakō)
   ============================================================ */
.casefeature{background:var(--navy);color:var(--offwhite);padding:clamp(64px,9vw,120px) 0;margin-top:clamp(40px,6vw,80px);}
.casefeature .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,48px);}
.cf-head{text-align:center;max-width:820px;margin:0 auto clamp(34px,5vw,52px);}
.cf-eyebrow{font-family:var(--latin);font-style:italic;font-size:clamp(15px,1.7vw,20px);letter-spacing:.1em;color:#e7b3a6;}
.cf-title{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3.6vw,42px);line-height:1.4;letter-spacing:.02em;margin:14px 0 12px;color:var(--offwhite);}
.cf-title .cf-arrow{color:#e7b3a6;font-weight:400;}
.cf-client{font-size:13.5px;letter-spacing:.05em;color:rgba(247,244,237,.6);margin:0;}
.cf-logo-row{text-align:center;margin-bottom:clamp(20px,3vw,34px);}
.cf-logo-row img{width:min(380px,82%);height:auto;display:inline-block;border:1px solid rgba(231,179,166,.16);}
.cf-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,24px);margin-bottom:clamp(34px,5vw,54px);}
.cf-gallery figure{margin:0;aspect-ratio:3/4;background:rgba(247,244,237,.03);border:1px solid rgba(231,179,166,.12);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cf-gallery img{width:100%;height:100%;object-fit:cover;}
.cf-gallery .cf-label img{object-fit:contain;}
.cf-gallery .cf-zoom img{transform:scale(1.1);transform-origin:center 58%;}
.cf-body{max-width:760px;margin:0 auto;}
.cf-lead{font-family:var(--serif);font-weight:500;font-size:clamp(17px,2vw,23px);line-height:1.8;text-align:center;margin:0 0 22px;}
.cf-lead em{font-style:normal;color:#e7b3a6;}
.cf-text{font-size:14.5px;line-height:2.05;color:rgba(247,244,237,.84);margin:0 0 26px;}
.cf-text b{color:var(--offwhite);font-weight:600;}
.cf-point{display:flex;gap:16px;border-top:1px solid rgba(231,179,166,.25);border-bottom:1px solid rgba(231,179,166,.25);padding:20px 0;margin:0 0 18px;align-items:baseline;}
.cf-plbl{font-family:var(--latin);font-style:italic;font-size:15px;letter-spacing:.16em;color:#e7b3a6;flex:none;}
.cf-point p{margin:0;font-size:14px;line-height:1.85;color:rgba(247,244,237,.86);}
.cf-hl{color:#e7b3a6;}
.cf-disclaim{font-size:12px;letter-spacing:.04em;color:rgba(247,244,237,.45);margin:0;text-align:center;}
@media (max-width:480px){
  .cf-gallery{grid-template-columns:1fr 1fr;}
  .cf-point{flex-direction:column;gap:6px;}
}