:root {
  
  --color-ink: #010101;          
  --color-main: #010101;         
  --color-main-2: #5a5a5a;       
  --color-accent: #010101;       
  --color-accent-2: #010101;
  --color-base: #fcfcfc;         
  --color-pale: #fcfcfc;         
  --color-line: #bdbdbd;         
  --color-on-dark: #fcfcfc;      
  --color-on-dark-line: rgb(252 252 252 / 0.6);
  --color-guide: rgb(252 252 252 / 0.12);   
  --color-frame: rgb(252 252 252 / 0.5);    
  --frame-y: 14px;               
  --frame-over: 18px;            
  --color-band: rgb(1 1 1 / 0.8);           
  --color-veil: rgb(1 1 1 / 0.94);          
  --color-veil-0: rgb(1 1 1 / 0);
  --color-veil-half: rgb(1 1 1 / 0.55);    
  --color-error: #010101;        
  --color-shadow: rgb(0 0 0 / 0.5);

  
  --bg-dark: var(--color-main);
  --bg-accent: var(--color-accent);

  
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-head: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --font-en: "Jost", "Zen Kaku Gothic New", sans-serif;   
  
  --fs-min: 13px;
  
  --fs-base: clamp(var(--fs-min), min(2.26dvh, 3.85vw), 15px);
  --fs-ui: max(var(--fs-min), 13px);   
  --fs-input: 16px;                     
  --ls-body: 0.06em;
  
  --fs-hd: 1.7em;                
  --ls-head: 0.14em;             
  --ls-wide: 0.3em;              
  --ls-copy: 0.18em;             
  --lh-body: 1.85;
  --lh-head: 1.5;
  --lh-wide: 2.5;                
  --skew: -14deg;                
  
  --grit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  -5 0 0 0 4'/%3E%3C/filter%3E%3Crect width='100%' height='100%' fill='white' filter='url(%23n)'/%3E%3C/svg%3E");

  
  --col: 480px;                  
  --header-h: 56px;
  --gutter: 26px;                
  --guide-x: 14px;               
  --next-h: 48px;                
  --radius-pill: 0;              
  --radius-s: 0;
  --shadow-soft: 0 0 10px 0 var(--color-shadow);
  --shadow-column: 0 0 24px 0 var(--color-shadow);

  
  --ease-out: cubic-bezier(0.11, 0.85, 0.14, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);   
  --rise: 0px;                   
  --dur-in: 500ms;
  --dur-wipe: 700ms;
  --dur-photo: 5500ms;
  --dur-dawn: 800ms;            
  --delay-dawn: 80ms;           
  --delay-type: 150ms;           
  --dur-type: 500ms;             
  --dur-hover: 300ms;
}

@media (max-height: 620px) {
  :root { --fs-hd: 1.45em; }
}

@media (min-width: 960px) {
  :root {
    --fs-base: clamp(var(--fs-min), 2.26dvh, 18.5px);
    --gutter: calc(var(--fs-base) * 1.73);
    --guide-x: calc(var(--fs-base) * 0.93);
    --frame-y: calc(var(--fs-base) * 0.93);
    --frame-over: calc(var(--fs-base) * 1.2);
  }
}