@font-face{
font-family:KineksCompact;
src:url("../assets/fonts/KineksCompact-Light.woff2") format("woff2");
font-weight:300;
font-style:normal;
font-display:swap
}

@font-face{
font-family:KineksCompact;
src:url("../assets/fonts/KineksCompact-Regular.woff2") format("woff2");
font-weight:400;
font-style:normal;
font-display:swap
}

@font-face{
font-family:KineksCompact;
src:url("../assets/fonts/KineksCompact-Medium.woff2") format("woff2");
font-weight:500;
font-style:normal;
font-display:swap
}

@font-face{
font-family:KineksCompact;
src:url("../assets/fonts/KineksCompact-SemiBold.woff2") format("woff2");
font-weight:600;
font-style:normal;
font-display:swap
}

@font-face{
font-family:KineksCompact;
src:url("../assets/fonts/KineksCompact-Bold.woff2") format("woff2");
font-weight:700;
font-style:normal;
font-display:swap
}

@font-face{
font-family:KineksCompact;
src:url("../assets/fonts/KineksCompact-LightOblique.woff2") format("woff2");
font-weight:300;
font-style:italic;
font-display:swap
}

@font-face{
font-family:KineksCompact;
src:url("../assets/fonts/KineksCompact-Oblique.woff2") format("woff2");
font-weight:400;
font-style:italic;
font-display:swap
}

@font-face{
font-family:KineksCompact;
src:url("../assets/fonts/KineksCompact-MediumOblique.woff2") format("woff2");
font-weight:500;
font-style:italic;
font-display:swap
}

@font-face{
font-family:KineksCompact;
src:url("../assets/fonts/KineksCompact-SemiBoldOblique.woff2") format("woff2");
font-weight:600;
font-style:italic;
font-display:swap
}

@font-face{
font-family:KineksCompact;
src:url("../assets/fonts/KineksCompact-BoldOblique.woff2") format("woff2");
font-weight:700;
font-style:italic;
font-display:swap
}

*{
box-sizing:border-box
}

html{
scroll-behavior:smooth
}

body{
margin:0;
background:#fff;
color:#080808;
font-family:KineksCompact,Arial,sans-serif
}

a{
color:inherit;
text-decoration:none
}

button,
input{
font:inherit
}

.page{
min-height:100vh;
padding:28px 5.35vw 30px
}

header{
display:flex;
align-items:flex-start;
justify-content:space-between
}

.logo{
width:62px;
display:block
}

.logo img{
width:100%;
display:block
}

.nav{
display:flex;
gap:30px;
font-size:12px;
font-weight:600;
padding-top:4px
}

.nav a:hover{
text-decoration:underline;
text-underline-offset:4px
}

.nav .active{
text-decoration:underline;
text-underline-offset:4px
}

.product{
padding-top:42px
}

.product-title{
font-size:clamp(62px,9.8vw,145px);
line-height:.92;
letter-spacing:-.07em;
text-align:center;
margin:0 0 38px;
font-weight:700
}

.top-grid{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:clamp(45px,6vw,80px);
border-top:1.5px solid #111;
padding-top:17px
}

.kicker{
font-size:10px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:9px
}

.copy{
font-size:15px;
line-height:1.45;
font-weight:500;
max-width:680px
}

.copy p{
margin:0 0 15px
}

.styles{
font-size:12px;
line-height:1.4
}

.styles div{
font-size:13px;
line-height:1.45;
margin-bottom:3px
}

.style-light,
.style-light-oblique{
font-weight:300
}

.style-regular,
.style-oblique{
font-weight:400
}

.style-medium,
.style-medium-oblique{
font-weight:500
}

.style-semibold,
.style-semibold-oblique{
font-weight:600
}

.style-bold,
.style-bold-oblique{
font-weight:700
}

.style-light-oblique,
.style-oblique,
.style-medium-oblique,
.style-semibold-oblique,
.style-bold-oblique{
font-style:italic
}

.font-info{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:48px
}

.font-info-item{
border-top:1px solid #111;
padding-top:14px
}

.font-info-label{
font-size:14px;
line-height:1.2;
letter-spacing:.12em;
text-transform:uppercase;
color:#777;
margin-bottom:12px
}

.font-info-value{
font-size:21px;
line-height:1.2;
letter-spacing:.01em;
color:#080808
}

.statement{
margin-top:52px;
border-top:1.5px solid #111;
border-bottom:1.5px solid #111;
padding:25px 0;
font-size:clamp(16px,1.25vw,19px);
line-height:1.32;
font-weight:500
}


/* =========================================================
   TYPE SYSTEM
   ========================================================= */

.type-system{
margin-top:52px
}

.section-heading{
border-top:1.5px solid #111;
padding-top:18px;
display:flex;
align-items:center;
justify-content:space-between
}

.section-title,
.section-count{
font-size:10px;
font-weight:700;
letter-spacing:.08em
}

.section-count{
color:#777
}

.type-controls{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:45px;
margin-top:30px
}

.control-label{
font-size:10px;
line-height:1;
letter-spacing:.12em;
color:#777;
margin-bottom:11px
}

.button-row{
display:flex;
flex-wrap:wrap;
gap:8px
}

.type-button{
appearance:none;
border:1px solid #bbb;
background:#fff;
color:#080808;
padding:10px 14px;
font-size:13px;
font-weight:600;
line-height:1;
cursor:pointer;
transition:background .15s ease,color .15s ease,border-color .15s ease
}

.type-button:hover{
border-color:#080808
}

.type-button.active{
background:#080808;
border-color:#080808;
color:#fff
}

.type-settings{
display:grid;
grid-template-columns:1fr 1fr 1fr auto;
gap:34px;
align-items:end;
margin-top:30px;
padding-bottom:25px;
border-bottom:1px solid #bbb
}

.setting{
min-width:0
}

.setting-label{
font-size:10px;
font-weight:700;
letter-spacing:.08em;
margin-bottom:11px
}

.setting-label span{
font-size:13px;
letter-spacing:0;
margin-left:5px;
text-decoration:underline;
text-underline-offset:3px
}

.setting-label .unit{
color:#777;
text-decoration:none;
margin-left:3px
}

input[type="range"]{
appearance:none;
-webkit-appearance:none;
width:100%;
height:4px;
background:#e6e6e6;
border:1px solid #bbb;
border-radius:4px;
outline:none
}

input[type="range"]::-webkit-slider-thumb{
appearance:none;
-webkit-appearance:none;
width:19px;
height:19px;
border-radius:50%;
background:#080808;
cursor:pointer
}

input[type="range"]::-moz-range-thumb{
width:19px;
height:19px;
border:none;
border-radius:50%;
background:#080808;
cursor:pointer
}

.reset-button{
appearance:none;
border:1px solid #bbb;
background:#fff;
color:#080808;
padding:9px 14px;
font-size:12px;
font-weight:600;
line-height:1;
cursor:pointer;
white-space:nowrap
}

.reset-button:hover{
border-color:#080808
}

.type-specimen{
margin-top:0
}

.specimen-meta{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
border-bottom:1px solid #bbb;
padding:17px 0 12px;
font-size:10px;
font-weight:600;
letter-spacing:.08em
}

.specimen-meta span:last-child{
color:#777;
letter-spacing:0
}

.specimen-text{
min-height:170px;
padding:34px 0 38px;
font-family:KineksCompact,Arial,sans-serif;
font-weight:400;
font-style:normal;
font-size:8px;
line-height:1.4;
letter-spacing:0;
outline:none;
cursor:text;
overflow-wrap:anywhere
}

.specimen-text:focus{
outline:none
}

.specimen-help{
border-top:1px solid #bbb;
padding-top:11px;
font-size:10px;
line-height:1.4;
color:#777
}


/* =========================================================
   GLYPHS
   ========================================================= */

.glyph-section{
margin-top:48px;
border-top:1.5px solid #111;
padding-top:18px
}

.glyph-title{
font-size:10px;
font-weight:700;
letter-spacing:.08em;
margin-bottom:10px
}

.glyph-grid{
width:100%;
display:grid;
grid-template-columns:repeat(13,1fr);
border-left:1px solid #bbb;
border-top:1px solid #bbb
}

.glyph{
height:56px;
border-right:1px solid #bbb;
border-bottom:1px solid #bbb;
display:flex;
align-items:center;
justify-content:center;
font-size:25px
}

.glyph.small{
font-size:18px
}

.glyph.large{
font-size:30px
}

.glyph.empty{
color:transparent
}


/* =========================================================
   LANGUAGE SUPPORT
   ========================================================= */

.language-support{
margin-top:52px
}

.language-list{
margin-top:18px;
font-size:13px;
line-height:1.95;
letter-spacing:.01em
}

.language-list span{
display:inline
}

.language-list span:not(:last-child)::after{
content:" · ";
white-space:pre
}


/* =========================================================
   TYPE SYSTEM IMAGE
   ========================================================= */

.type-system-image{
margin-top:52px;
border-top:1.5px solid #111;
padding-top:18px
}

.type-system-image img{
display:block;
width:100%;
height:auto
}


/* =========================================================
   AVAILABILITY
   ========================================================= */

.availability{
margin-top:52px;
border-top:1.5px solid #111;
padding-top:22px;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:40px
}

.availability h2{
font-size:18px;
margin:0
}

.links{
display:flex;
justify-content:flex-end;
align-items:flex-start;
gap:25px;
font-size:13px;
font-weight:600;
flex-wrap:nowrap;
white-space:nowrap
}

.links a{
text-decoration:underline;
text-underline-offset:4px
}

.specimen-link{
display:inline-flex;
align-items:center;
gap:6px
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer{
margin-top:70px;
border-top:1.5px solid #111;
padding-top:24px;
display:flex;
justify-content:space-between
}

.info{
font-size:10px;
line-height:1.55
}

.info strong{
display:block;
font-size:11px;
margin-bottom:4px
}

.info a{
display:block;
width:max-content
}

.brand{
text-align:right;
font-size:32px;
font-weight:700;
letter-spacing:-.06em;
line-height:.9
}

.copyline{
font-size:9px;
margin-top:5px
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:800px){

.page{
padding:18px 5vw 24px
}

.logo{
width:48px
}

.nav{
gap:12px;
font-size:10.5px
}

.product{
padding-top:46px
}

.product-title{
font-size:clamp(48px,12.5vw,65px);
line-height:.96;
letter-spacing:-.055em;
margin-bottom:32px
}

.top-grid{
grid-template-columns:1fr;
gap:30px;
padding-top:15px
}

.copy{
font-size:13px;
line-height:1.43
}

.copy p{
margin-bottom:14px
}

.font-info{
grid-template-columns:repeat(2,1fr);
gap:24px 16px;
margin-top:40px
}

.font-info-item{
padding-top:12px
}

.font-info-label{
font-size:11px;
margin-bottom:9px
}

.font-info-value{
font-size:19px
}

.statement{
margin-top:40px;
padding:21px 0;
font-size:15px;
line-height:1.36
}


/* TYPE SYSTEM — MOBILE */

.type-system{
margin-top:40px
}

.section-heading{
padding-top:15px
}

.type-controls{
grid-template-columns:1fr;
gap:25px;
margin-top:25px
}

.button-row{
gap:7px
}

.type-button{
padding:9px 11px;
font-size:11px
}

.type-settings{
grid-template-columns:1fr;
gap:22px;
margin-top:28px;
padding-bottom:21px
}

.reset-button{
width:max-content
}

.specimen-meta{
display:block;
padding:15px 0 11px
}

.specimen-meta span{
display:block
}

.specimen-meta span:last-child{
margin-top:5px
}

.specimen-text{
min-height:145px;
padding:28px 0 32px
}

.specimen-help{
font-size:9px
}


/* TYPE SYSTEM IMAGE — MOBILE */

.type-system-image{
margin-top:40px;
padding-top:15px
}


/* GLYPHS — MOBILE */

.glyph-section{
margin-top:40px;
padding-top:15px
}

.glyph-title{
font-size:9px;
margin-bottom:9px
}

.glyph-grid{
grid-template-columns:repeat(8,1fr)
}

.glyph{
height:48px;
font-size:20px
}

.glyph.small{
font-size:15px
}

.glyph.large{
font-size:23px
}

.language-support{
margin-top:40px
}

.language-list{
margin-top:15px;
font-size:12px;
line-height:1.9
}

.type-system-image{
margin-top:40px;
padding-top:15px
}


.availability{
margin-top:42px;
padding-top:19px;
display:block
}

.links{
margin-top:14px;
gap:17px;
font-size:11px;
flex-wrap:wrap;
white-space:normal
}

.footer{
margin-top:55px;
padding-top:22px;
display:block
}

.brand{
font-size:27px;
text-align:left;
margin-top:22px
}

}


@media(max-width:370px){

.nav{
gap:9px;
font-size:10px
}

.product-title{
font-size:46px
}

.copy{
font-size:12.5px
}

.type-button{
padding:8px 10px;
font-size:10.5px
}

.specimen-text{
font-size:8px
}

.glyph-grid{
grid-template-columns:repeat(7,1fr)
}

}