:root{
  --gold:#A59364;
  --gold-dk:#7E6E45;
  --ink:#231916;
  --paper:#EFEAE1;
  --paper-2:#F8F5EF;
  --card:#FFFDF9;
  --line:rgba(35,25,22,.16);
  --muted:#7A716A;
  --serif:"Shippori Mincho",serif;
  --display:"Cormorant Garamond","Shippori Mincho",serif;
  --hand:"Klee One","Shippori Mincho",cursive;
  --hand-en:"Caveat",cursive;
  --sans:"Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--serif);line-height:2.05;letter-spacing:.05em;
  -webkit-font-smoothing:antialiased;
  background-image:
    repeating-linear-gradient(0deg,rgba(35,25,22,.018) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(35,25,22,.014) 0 1px,transparent 1px 4px);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* =========================================================
   Two-column scrapbook: fixed poster / scrolling collage
   ========================================================= */
.layout{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);position:relative}

/* binder spine sitting between the two columns */
.spine{
  position:absolute;top:0;bottom:0;left:44%;width:2px;translate:-1px 0;
  background:linear-gradient(180deg,rgba(35,25,22,.28),rgba(35,25,22,.10));
}
.spine::before{
  content:"";position:absolute;left:-7px;top:0;bottom:0;width:16px;
  background-image:radial-gradient(circle at 8px 8px,transparent 5px,rgba(35,25,22,.30) 5px,rgba(35,25,22,.30) 6px,transparent 6px);
  background-size:16px 130px;background-repeat:repeat-y;
}

/* ---------- left: fixed poster ---------- */
.poster{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,3.4vw,58px);gap:26px;
}
.poster__logo{flex:0 0 auto;width:clamp(140px,13vw,200px)}
.poster__fig{position:relative;flex:1 1 0;min-height:240px;overflow:hidden;box-shadow:0 22px 44px rgba(35,25,22,.26);rotate:-1.2deg}
.poster__fig img,.poster__fig video{display:block;width:100%;height:100%;object-fit:cover}
.poster__fig figcaption{
  position:absolute;inset:auto 0 0 0;padding:26px 24px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(20,14,12,.86));
}
.poster__hand{font-family:var(--hand-en);font-size:clamp(34px,4.4vw,58px);line-height:1.05;color:#fff}
.poster__jp{font-size:12.5px;letter-spacing:.26em;margin-top:8px;color:rgba(255,255,255,.88)}
.poster__tape{
  position:absolute;top:-14px;left:50%;translate:-50% 0;width:120px;height:28px;rotate:-2deg;
  background:rgba(214,203,182,.72);box-shadow:0 2px 6px rgba(35,25,22,.14);
}
.poster__meta{flex:0 0 auto;font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--muted);line-height:2.1}
.poster__cta{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:10px}

/* ---------- right: scrolling collage ---------- */
.collage{padding:clamp(56px,7vw,110px) clamp(24px,4vw,64px) 0;min-width:0}
.block{margin-bottom:clamp(64px,8vw,120px)}
.label{
  display:inline-block;font-family:var(--hand-en);font-size:26px;color:var(--gold-dk);
  transform:rotate(-2deg);margin-bottom:6px;
}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.2vw,52px);line-height:1.2;letter-spacing:.03em}
.h2 small{display:block;font-family:var(--serif);font-size:12.5px;letter-spacing:.26em;color:var(--muted);margin-top:12px}
.lead{font-size:14.5px;line-height:2.4;color:#3C332E;margin-top:22px}
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:none}

/* paper cards */
.note{
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 12px 26px rgba(35,25,22,.10);
  padding:28px clamp(20px,2.6vw,34px) 32px;position:relative;
}
.note--tilt{rotate:-.8deg}
.note--tilt2{rotate:.9deg}
.tape{
  position:absolute;top:-12px;left:28px;width:88px;height:24px;rotate:-3deg;
  background:rgba(214,203,182,.75);box-shadow:0 2px 5px rgba(35,25,22,.12);
}
.tape--r{left:auto;right:28px;rotate:3deg}

/* polaroid */
.polas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px);margin-top:30px}
.pola{background:#fff;padding:12px 12px 0;border:1px solid var(--line);box-shadow:0 14px 28px rgba(35,25,22,.14)}
.pola:nth-child(odd){rotate:-1.4deg}
.pola:nth-child(even){rotate:1.1deg}
.pola figure{aspect-ratio:4/3;overflow:hidden}
.pola img,.pola video{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.pola:hover img,.pola:hover video{transform:scale(1.05)}
.pola__cap{padding:14px 4px 18px;text-align:center}
.pola__t{font-family:var(--hand);font-size:17px;letter-spacing:.04em}
.pola__s{font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--muted);margin-top:6px}

/* clipping list */
.clips{display:grid;gap:18px;margin-top:30px}
.clip{display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start}
.clip__n{font-family:var(--hand-en);font-size:34px;color:var(--gold-dk);line-height:1}
.clip h3{font-size:17px;font-weight:500;letter-spacing:.06em;margin-bottom:8px}
.clip p{font-size:13.5px;line-height:2.15;color:var(--muted)}

/* flow as a memo */
.flow{counter-reset:s;margin-top:8px}
.flow li{counter-increment:s;list-style:none;display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 0;border-bottom:1px dashed var(--line)}
.flow li:last-child{border-bottom:0}
.flow li::before{content:counter(s);font-family:var(--hand-en);font-size:26px;color:var(--gold-dk);line-height:1.1}
.flow h3{font-size:16px;font-weight:500;letter-spacing:.06em;margin-bottom:6px}
.flow p{font-size:13px;line-height:2.1;color:var(--muted)}

/* definition list */
.dl{margin-top:8px}
.dl div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:16px 0;border-bottom:1px dashed var(--line)}
.dl div:last-child{border-bottom:0}
.dl dt{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;color:var(--gold-dk)}
.dl dd{font-size:14.5px;line-height:2.1}

.btn{
  display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.16em;
  border:1px solid var(--ink);color:var(--ink);padding:13px 30px;border-radius:2px;
  transition:background .35s ease,color .35s ease;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--fill{background:var(--ink);color:var(--paper)}
.btn--fill:hover{background:transparent;color:var(--ink)}
.poster .btn{border-color:var(--ink)}

/* form */
.form{margin-top:8px}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.12em;margin-bottom:8px;color:var(--muted)}
.field label .req{color:var(--gold-dk);margin-left:6px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--paper-2);border:0;border-bottom:1px solid var(--line);
  padding:12px 4px;line-height:1.7;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold-dk);background:#fff}
.field textarea{min-height:130px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.small{font-family:var(--sans);font-size:12px;line-height:2;color:var(--muted)}
.form button{
  font-family:var(--sans);font-size:13px;letter-spacing:.2em;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:2px;
  padding:15px 48px;cursor:pointer;transition:background .35s,color .35s;
}
.form button:hover{background:transparent;color:var(--ink)}

.ftr{padding:50px 0 40px;border-top:1px solid var(--line);text-align:center}
.ftr img{width:180px;margin:0 auto 18px}
.ftr small{font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--muted)}
.draft{background:var(--ink);color:var(--paper);text-align:center;font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;padding:9px 16px;line-height:1.7}

.badge-b2b{display:inline-block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;border:1px solid rgba(255,255,255,.6);color:#fff;padding:6px 14px;margin-bottom:14px}

@media (max-width:860px){
  .layout{display:block}
  .spine{display:none}
  .poster{position:relative;height:auto;padding:40px 24px 50px}
  .poster__fig{flex:0 0 auto;aspect-ratio:3/4}
  .collage{padding:50px 24px 0}
  .polas,.grid2{grid-template-columns:1fr}
  .dl div{grid-template-columns:1fr;gap:5px}
  .note--tilt,.note--tilt2,.pola:nth-child(odd),.pola:nth-child(even),.poster__fig{rotate:none}
}