/* Michroma — self-hosted (embedded) so the display face never depends on an
   external request. Family name 'Michroma' matches the --euro stack. */
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/michroma.ttf") format("truetype");}

:root{
  color-scheme:dark;
  --black:#0A0A0B;        /* F3 body */
  --panel:#121214;        /* raised body panel */
  --white:#E8E8E6;        /* engraved type fill */
  --line:rgba(232,232,230,.12);
  --red:#D9251D;          /* Giugiaro stripe */
  --orange:#E8861B;       /* F3 dial: X 80 flash sync */
  --green:#5FA052;        /* F3 dial: A (auto) */
  --cyan:#2BB6AD;         /* F3 frame-counter numerals */
  --euro:"Michroma",sans-serif;
  --instrument:"Archivo","Helvetica Neue",Arial,sans-serif; /* F3 計器(ダイヤル/カウンター) */
  --pad-x:clamp(40px,7vw,90px);   /* section side padding */
  --stripe-x:clamp(14px,3vw,40px);/* red stripe inset from the RIGHT edge */
  --ease:cubic-bezier(.2,.7,.2,1); /* one easing everywhere — film advance, not bounce */
}

::selection{background:var(--red); color:var(--black)}
html{scrollbar-width:thin; scrollbar-color:var(--panel) var(--black)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--panel); border:2px solid var(--black)}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black); color-scheme:dark}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  background:#0A0A0B; color:var(--white);
  font-family:var(--euro); font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* THE STRIPE — fixed vertical red bar, like the F3 grip */
/* red spine: starts at the top plate (takumital) and runs with the content — the hero photo stays clear */
.hero__plate::before, .section::before, .foot::before{
  content:""; position:absolute; top:0; bottom:0; right:var(--stripe-x);
  width:4px; background:var(--red);
}
.section, .foot{position:relative}
@media (max-width:620px){
  .hero__plate::before, .section::before, .foot::before{right:8px; width:3px}
  .section__head::after{margin-right:calc(-1 * (var(--pad-x) - 8px))}
}

/* base black layer — html/bodyの背景を無視するビューワー対策 */
.bg{position:fixed; inset:0; z-index:-10; background:#0A0A0B}

/* grain */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.045; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- nav ---- */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; justify-content:space-between; align-items:baseline;
  padding:20px var(--pad-x);
  background:var(--black);
}
.nav .mark{font-size:13px; letter-spacing:normal}

.nav ul{display:flex; gap:clamp(14px,2.4vw,30px); list-style:none}
.nav a{
  font-size:9px; letter-spacing:normal; text-transform:uppercase; white-space:nowrap;
  color:var(--white); text-decoration:none; padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}
.nav a:hover,.nav a:focus-visible{border-color:var(--red); outline:none}

/* ---- hero ---- */
.hero{
  position:relative;
  padding:0; /* plate is full-bleed */
}
.hero__deck{          /* DW-4 top view: finder window left, dial shoulder right */
  display:flex; align-items:stretch;
  width:100%;
  background:var(--black);
}
.hero__finder{        /* chimney bezel around the screen */
  flex:1; min-width:0;
  padding:clamp(8px,1.5vw,14px);
  background:#08080A; border:1px solid rgba(232,232,230,.07);
}
.hero__img{           /* the focusing screen itself */
  position:relative; aspect-ratio:3/2;
  background-color:var(--black); overflow:hidden;
}
.hero__img::after{    /* looking down the chimney: inner edge + vignette */
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(232,232,230,.1),
             inset 0 0 clamp(28px,5vw,72px) rgba(0,0,0,.8);
}
.hero__side{          /* right shoulder: dial + counter (cf. F3 top view) */
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:12px; padding:12px clamp(8px,1.4vw,16px);
  width:clamp(158px,19vw,202px); flex:0 0 auto;
}
.hero__crank{          /* left shoulder: rewind crank, top view — slimmer than the right, finder sits left of centre */
  display:flex; justify-content:center; align-items:center;
  padding:12px clamp(6px,1vw,12px);
  width:clamp(96px,11vw,132px); flex:0 0 auto;
}
.hero__crank svg{display:block; width:clamp(70px,7.6vw,96px); height:auto}
.hero__track{display:flex; height:100%; will-change:transform}
.hero__slide{
  flex:0 0 100%; height:100%;
  background-color:#161518; background-size:cover; background-position:center;
}
.hero__plate{ /* solid black top-plate, like the F3 body — engraving sits on it, not on the photo */
  position:relative; z-index:1;
  background:var(--black);
  padding:30px var(--pad-x) clamp(40px,7vh,70px);
}

.hero__wordmark{
  font-weight:400;
  font-size:clamp(30px,8.2vw,104px); line-height:1;
  letter-spacing:normal; margin-bottom:18px;
  opacity:0; transform:translateY(16px);
  animation:rise 1s .1s cubic-bezier(.2,.7,.2,1) forwards;
}

.hero__specs{
  display:flex; gap:clamp(18px,4vw,54px); flex-wrap:wrap;
  font-size:clamp(9px,1.1vw,11px); letter-spacing:normal; text-transform:uppercase;
  color:var(--white);
  opacity:0; animation:fade .9s .5s ease forwards;
}
.hero__specs b{color:var(--white); font-weight:400}
.hero__instruments{display:flex; align-items:center; gap:5px}
.hero__dial{
  width:clamp(78px,8.8vw,102px);
  opacity:0; animation:fade .9s .8s ease forwards; user-select:none;
}
.hero__dial svg{display:block; width:100%; height:auto; overflow:visible}
.hero__dial text, .hero__counter text{
  font-family:var(--instrument); font-weight:600;
  font-variant-numeric:tabular-nums; fill:var(--white);
}
.hero__counter{
  width:clamp(26px,2.6vw,34px);
  opacity:0; animation:fade .9s .9s ease forwards; user-select:none;
}
.hero__counter svg{display:block; width:100%; height:auto}
.hero__counter text{fill:var(--cyan)}
.hero__counter line{stroke:rgba(232,232,230,.5)}
.hero__counter line.l5{stroke:var(--white)}
.hero__shutter{ /* F3のシャッターボタン: 白い円盤+中央の黒点。送りの直前に沈む */
  display:flex; align-items:center; justify-content:center;
  margin-left:-2px; margin-right:7px; /* ダイヤル側に寄せ、カウンターとは距離を保つ(実機の配置) */
  width:22px; height:22px; border-radius:50%;
  background:var(--white); border:none; opacity:.9;
  padding:0; cursor:pointer;
  transition:transform .12s ease-in, opacity .12s ease-in;
}
.hero__shutter-btn{
  width:5px; height:5px; border-radius:50%;
  background:var(--black);
}
.hero__shutter.is-press{transform:scale(.85); opacity:.65}
.hero__dial .r{fill:var(--red)}
.hero__dial .o{fill:var(--orange)}
.hero__dial .g{fill:var(--green)}
.hero__dial .sp{opacity:.5; transition:opacity .45s ease}
.hero__dial .sp.is-sel{opacity:1}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .hero__wordmark,.hero__specs,.hero__dial,.hero__counter{animation:none;opacity:1;transform:none}
}

/* ---- section shell ---- */
.section{padding:clamp(84px,12vh,150px) var(--pad-x); scroll-margin-top:72px}
.hero + .section{padding-top:clamp(40px,6vh,72px)} /* takumitalの名乗りとWorksは一続きの面 */
.section__head{
  position:relative;
  display:flex; align-items:center; gap:16px;
  margin-bottom:54px;
}
.section__tick{width:26px; height:1px; background:var(--red)}
/* horizontal lead-out that joins the section number to the red spine on the right */
/* the heading rules out to the red spine on the right */
.section__head::after{
  /* 接続はヘアライン: 太いのはアンカー(ティックと背骨)、細いのは引き出し線 */
  content:""; flex:1; height:1px; background:var(--red);
  margin-right:calc(-1 * (var(--pad-x) - var(--stripe-x)));
}
.section__title{
  font-size:clamp(14px,1.8vw,18px); font-weight:400;
  letter-spacing:normal; text-transform:uppercase;
}

/* ---- works: series cover grid (piczo-style entry) ---- */
.grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
}

/* collection header — a roll label spanning the grid */
.group{
  grid-column:1/-1;
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:26px 0 4px;
}
.grid > .group:first-child{margin-top:0}
.group__tick{width:14px; height:1px; background:var(--red); align-self:center}
.group__title{
  font-weight:400; font-size:clamp(11px,1.4vw,14px);
  letter-spacing:normal; text-transform:uppercase;
}
.group__cap{
  font-size:8px; letter-spacing:normal; color:var(--white); line-height:1.8;
}
.group--rule{margin:34px 0 6px; border-top:1px solid var(--line)}

.cover.is-portrait .cover__img{aspect-ratio:2/3}
.cover{
  background:var(--panel); border:1px solid var(--line);
  padding:8px 8px 6px; cursor:pointer; text-align:left;
  font-family:var(--euro); color:var(--white);
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.cover:hover,.cover:focus-visible{transform:translateY(-5px); border-color:var(--red); outline:none}
.cover:hover .cover__img,.cover:focus-visible .cover__img{filter:contrast(1.03) saturate(1)}
.cover__img{
  width:100%; aspect-ratio:3/2;
  background-size:cover; background-position:center;
  filter:contrast(1.03) saturate(.82);
  transition:filter .45s var(--ease);
}
.cover__rebate{
  margin-top:8px; padding-top:8px; border-top:1px solid var(--line);
  font-size:9px; letter-spacing:normal; text-transform:uppercase;
}
.cover__name{display:block; color:var(--white)}
.cover__cap{
  display:block; margin-top:6px;
  font-family:var(--euro); font-size:8px; letter-spacing:normal;
  text-transform:none; color:var(--white); line-height:1.8;
}
.cover__count{display:block; margin-top:3px; color:var(--white)}
.cover__count i{font-style:normal; font-family:var(--instrument); font-weight:600; font-variant-numeric:tabular-nums; color:var(--cyan)}

/* ---- series viewer (fullscreen) ---- */
.viewer{
  position:fixed; inset:0; z-index:200; background:var(--black);
  display:none; flex-direction:column;
}
.viewer.open{display:flex}
.viewer__bar{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px clamp(40px,7vw,90px);
  font-size:10px; letter-spacing:normal; text-transform:uppercase;
}
.viewer__title{color:var(--white)}
.viewer__title b{font-weight:400; color:var(--white)}
.viewer__title i{font-style:normal; color:var(--white); margin-left:14px; letter-spacing:normal}
.viewer__close{
  background:none; border:1px solid var(--line); color:var(--white);
  font-family:var(--euro); font-size:9px; letter-spacing:normal; text-transform:uppercase;
  padding:8px 14px; cursor:pointer;
}
.viewer__close:hover,.viewer__close:focus-visible{border-color:var(--red); color:var(--red); outline:none}
.viewer__stage{
  flex:1; position:relative; display:flex; align-items:center; justify-content:center;
  padding:0 clamp(40px,7vw,90px) 10px; min-height:0;
}
.viewer__img{
  max-width:100%; max-height:100%; width:auto; height:100%;
  background-size:contain; background-position:center; background-repeat:no-repeat;
  aspect-ratio:3/2;
}
.viewer__img.portrait{aspect-ratio:2/3}
.viewer__nav{
  position:absolute; top:0; bottom:0; width:34%;
  background:none; border:0; cursor:pointer;
}
.viewer__nav.prev{left:0; cursor:w-resize}
.viewer__nav.next{right:0; cursor:e-resize}
.viewer__nav:focus-visible{outline:1px solid var(--red); outline-offset:-1px}
.viewer__foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px clamp(40px,7vw,90px) 22px;
  font-size:9px; letter-spacing:normal; text-transform:uppercase;
}
.viewer__no{font-family:var(--instrument); font-weight:600; font-variant-numeric:tabular-nums; color:var(--cyan)}
.viewer__data{color:var(--white)}
.viewer__hint{color:var(--white); opacity:.6}
@media (max-width:620px){ .viewer__hint{display:none} }


/* ---- profile ---- */
.profile__grid{display:flex; gap:clamp(26px,4vw,60px); align-items:flex-start}
.profile__text{flex:1; min-width:0}
.profile__plate{ /* back data plate, cf. F3 serial plate */
  flex:0 0 clamp(250px,27vw,330px);
  background:var(--panel); border:1px solid var(--line);
  padding:20px 22px 24px;
}
.profile__plate-head{
  display:flex; align-items:center; gap:10px;
  font-size:9px; letter-spacing:normal; text-transform:uppercase; color:var(--white); opacity:.85;
  padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--line);
}
.profile__plate-tick{width:14px; height:2px; background:var(--red); flex:none}
.profile__plate .profile__list{margin-top:12px}
@media (max-width:820px){.profile__grid{flex-direction:column; gap:26px} .profile__plate{flex:none; width:100%; max-width:420px}}
.profile__text p{font-size:13px; line-height:2; letter-spacing:normal; color:var(--white); margin-bottom:1.2em; max-width:56ch}
.profile__list{
  margin-top:26px; font-size:10px; letter-spacing:normal; text-transform:uppercase;
  color:var(--white); line-height:2.4;
}
.profile__list b{color:var(--white); font-weight:400}
.profile__list i{font-style:normal; color:var(--red)}
.profile__list a{color:var(--white); text-transform:none; text-decoration:none; border-bottom:1px solid rgba(232,232,230,.25)}
.profile__list a:hover{color:var(--red); border-color:var(--red)}

/* ---- contact ---- */
/* annotated address — one email string, three red rules: Instagram / Website / Email */
.addr{
  position:relative; display:inline-block; padding-bottom:50px;
  font-size:clamp(16px,4.6vw,52px); font-weight:400; letter-spacing:normal; line-height:1.1;
}
.addr__mail{color:var(--white); text-decoration:none; white-space:nowrap}
.addr__mail:hover{color:var(--red)}
.ann{position:absolute; left:0; width:0; text-decoration:none}
.ann__line{display:block; height:1px; background:var(--red)}
.ann:hover .ann__line{height:3px}
.ann__lab{
  position:absolute; left:100%; top:50%; transform:translateY(-50%);
  margin-left:4px; white-space:nowrap;
  font-family:var(--euro); font-size:6.5px; letter-spacing:normal; text-transform:uppercase;
  color:var(--white);
}
.ann:hover .ann__lab{color:var(--red)}

/* ---- footer ---- */
.foot{
  border-top:1px solid var(--line);
  padding:24px clamp(40px,7vw,90px);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:8.5px; letter-spacing:normal; text-transform:uppercase; color:var(--white);
}
.foot b{color:var(--red); font-weight:400}


/* ================= mobile ================= */
@media (max-width:620px){
  /* tighter global gutters (desktop min 40px is too wide at 360px) */
  :root{--pad-x:22px; --stripe-x:8px}
  .section{padding-top:64px; padding-bottom:64px}
  .hero + .section{padding-top:36px}
  .hero__plate{padding:22px 22px 24px}
  .foot{padding:20px 22px}

  /* nav: compact, never wraps over content */
  .nav{padding:14px 22px}
  .nav .mark{font-size:11px; letter-spacing:normal}
  .nav ul{gap:12px}
  .nav a{font-size:8px; letter-spacing:normal}

  /* hero type */
  .hero__wordmark{font-size:clamp(34px,11vw,48px); letter-spacing:normal; margin-bottom:14px}
  .hero__specs{flex-direction:column; gap:7px; font-size:9px; letter-spacing:normal}
  .hero__instruments{gap:3px}
  .hero__side{padding:6px 8px 6px 4px; gap:6px; width:auto} /* 右に逃げ場を確保、カウンターを縁から離す */
  .hero__crank{width:auto; padding:6px 3px}
  .hero__crank svg{width:32px}
  .hero__dial{width:42px}
  .hero__counter{width:15px}
  .hero__shutter{width:14px; height:14px; margin-left:-1px; margin-right:5px}
  .hero__shutter-btn{width:4px; height:4px}


  /* viewer chrome */
  .viewer__bar{padding:12px 16px}
  .viewer__title{font-size:9px; letter-spacing:normal}
  .viewer__title i{display:block; margin:4px 0 0}
  .viewer__close{padding:7px 10px; font-size:8px}
  .viewer__stage{padding:0 12px 8px}
  .viewer__foot{padding:10px 16px 16px}

  /* grid: single column, full width */
  .grid{grid-template-columns:1fr; gap:12px}


}

/* very narrow (<=380px) */
@media (max-width:380px){
  .nav ul{gap:9px}
}

/* reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}