:root{
  --phi: 1.618033988749895;

   
  --t--3: 9.9px;     
  --t--2: 11.6px;    
  --t--1: 13.6px;    
  --t-0:  16px;      
  --t-1:  18.8px;    
  --t-2:  22.1px;    
  --t-3:  25.9px;    
  --t-4:  35.7px;    
  --t-5:  41.9px;    
  --t-6:  67.8px;    
  --t-7:  109.7px;   

   
  --t-1-f: clamp(20.6px, 2.0vw, 25.9px);
  --t-2-f: clamp(25.9px, 3.4vw, 41.9px);
  --t-3-f: clamp(41.9px, 5.6vw, 67.8px);
  --t-4-f: clamp(67.8px, 9.0vw, 109.7px);

   
  --s-1:  8px;      
  --s-2:  11px;     
  --s-3:  13px;     
  --s-4:  18px;     
  --s-5:  21px;     
  --s-6:  29px;     
  --s-7:  34px;     
  --s-8:  47px;     
  --s-9:  55px;     
  --s-10: 76px;     
  --s-11: 89px;     
  --s-12: 123px;    
  --s-13: 144px;    
  --s-14: 233px;    
  --s-15: 377px;    

   
  --r-land: 1.618 / 1;    
  --r-port: 1 / 1.618;    
  --r-sq:   1 / 1;        

   
  --lh-body:  1.618;
  --lh-lead:  1.382;    
  --lh-disp:  1.05;     

   
  --tr-disp:  -0.0344em;   
  --tr-body:   0em;        
  --tr-label:  0.2361em;   
}

 
.phi-label{font-size:var(--t--1);letter-spacing:var(--tr-label);text-transform:uppercase;line-height:var(--lh-body)}
.phi-body {font-size:var(--t-0); letter-spacing:var(--tr-body); line-height:var(--lh-body)}
.phi-lead {font-size:var(--t-1-f);letter-spacing:-0.0138em;    line-height:var(--lh-lead)}
.phi-h2   {font-size:var(--t-2-f);letter-spacing:-0.0191em;    line-height:var(--lh-lead)}
.phi-h1   {font-size:var(--t-3-f);letter-spacing:var(--tr-disp);line-height:var(--lh-disp)}
.phi-hero {font-size:var(--t-4-f);letter-spacing:var(--tr-disp);line-height:var(--lh-disp)}

 
.phi-land{aspect-ratio:var(--r-land)}
.phi-port{aspect-ratio:var(--r-port)}
.phi-sq  {aspect-ratio:var(--r-sq)}