@font-face{
  font-family:"CT Triptih Fill";
  src:url("../../public/fonts/triptih/Triptih-Fill.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"CT Triptih Parth";
  src:url("../../public/fonts/triptih/Triptih-Parth.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"CT Triptih Stroke";
  src:url("../../public/fonts/triptih/Triptih-Stroke.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

.ct-specimen-page{
  --ct-paper:#f9f6f0;
  --ct-ink:#1a1a1a;
  --ct-muted:rgba(26,26,26,.48);
  --ct-line:rgba(26,26,26,.14);
  --ct-soft:rgba(26,26,26,.045);
  --ct-accent:#3b1b22;
  --ct-graphite:#242326;
  --ct-fill:"CT Triptih Fill", "Arial Narrow", Arial, sans-serif;
  --ct-parth:"CT Triptih Parth", "Arial Narrow", Arial, sans-serif;
  --ct-stroke:"CT Triptih Stroke", "Arial Narrow", Arial, sans-serif;
  min-height:100vh;
  background:var(--ct-paper);
  color:var(--ct-ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow:hidden;
}

.ct-specimen-page *,
.ct-specimen-page *::before,
.ct-specimen-page *::after{
  box-sizing:border-box;
}

.ct-specimen-page a{
  color:inherit;
  text-decoration:none;
}

.ct-specimen-page .ct-specimen-header{
  position:fixed;
  z-index:20;
  top:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:20px clamp(18px, 3vw, 44px);
  color:rgba(26,26,26,.42);
  font-size:11px;
  line-height:1;
  letter-spacing:0;
  mix-blend-mode:multiply;
}

.ct-specimen-page .ct-specimen-header__nav{
  display:flex;
  align-items:center;
  gap:clamp(14px, 2vw, 28px);
}

.ct-specimen-page .ct-specimen-header__link{
  opacity:.62;
  transition:opacity .28s ease, color .28s ease;
}

.ct-specimen-page .ct-specimen-header__link:hover{
  color:var(--ct-accent);
  opacity:1;
}

.ct-specimen-page .ct-specimen-main{
  position:relative;
}

.ct-specimen-page .ct-specimen-label{
  margin:0;
  color:var(--ct-muted);
  font-size:12px;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
}

.ct-specimen-page .ct-hero{
  position:relative;
  display:grid;
  min-height:100vh;
  min-height:100svh;
  padding:56px clamp(16px, 3vw, 44px) 24px;
  overflow:hidden;
}

.ct-specimen-page .ct-hero__stage{
  perspective:1400px;
  display:grid;
  place-items:center;
  align-content:center;
  min-height:calc(100svh - 98px);
}

.ct-specimen-page .ct-hero__kicker{
  position:absolute;
  left:clamp(18px, 3vw, 44px);
  bottom:82px;
  margin:0;
  color:var(--ct-muted);
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
  opacity:.54;
}

.ct-specimen-page .ct-hero__word{
  --ct-hero-x:0px;
  --ct-hero-y:0px;
  --ct-hero-rx:0deg;
  --ct-hero-ry:0deg;
  --ct-hero-space:-.078em;
  margin:0;
  font-family:var(--ct-fill);
  font-size:clamp(220px, 42vw, 860px);
  font-weight:400;
  line-height:.48;
  letter-spacing:var(--ct-hero-space);
  text-transform:uppercase;
  transform:translate3d(var(--ct-hero-x), var(--ct-hero-y), 0) rotateX(var(--ct-hero-rx)) rotateY(var(--ct-hero-ry));
  transition:letter-spacing .75s cubic-bezier(.18, .72, .16, 1), transform .75s cubic-bezier(.18, .72, .16, 1);
  white-space:nowrap;
}

.ct-specimen-page .ct-hero__meta{
  align-self:end;
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
  border-top:1px solid var(--ct-line);
  padding-top:14px;
  color:var(--ct-muted);
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
  overflow:auto hidden;
  scrollbar-width:none;
}

.ct-specimen-page .ct-hero__meta::-webkit-scrollbar{
  display:none;
}

.ct-specimen-page .ct-hero__meta span{
  flex:0 0 auto;
}

.ct-specimen-page .ct-hero__test{
  flex:0 0 auto;
  margin-left:auto;
  color:var(--ct-ink);
}

.ct-specimen-page .ct-specimen-pause{
  display:grid;
  align-content:center;
  min-height:62vh;
  padding:clamp(86px, 14vw, 220px) clamp(18px, 4vw, 72px);
  border-bottom:1px solid var(--ct-line);
}

.ct-specimen-page .ct-specimen-pause p{
  width:min(980px, 94vw);
  margin:0;
  font-family:var(--ct-fill);
  font-size:clamp(46px, 8.6vw, 168px);
  line-height:.84;
  letter-spacing:-.055em;
}

.ct-specimen-page .ct-specimen-pause p + p{
  margin-top:clamp(10px, 1.8vw, 28px);
  color:var(--ct-muted);
  font-family:var(--ct-parth);
}

.ct-specimen-page .ct-specimen-pause--first{
  min-height:74vh;
}

.ct-specimen-page .ct-specimen-pause--narrow{
  min-height:46vh;
}

.ct-specimen-page .ct-specimen-pause--narrow p{
  margin-left:auto;
  width:min(620px, 88vw);
}

.ct-specimen-page .ct-specimen-pause--wide{
  min-height:82vh;
}

.ct-specimen-page .ct-specimen-pause--wide p{
  width:min(1180px, 96vw);
  font-family:var(--ct-stroke);
  font-size:clamp(58px, 11.5vw, 230px);
}

.ct-specimen-page .ct-specimen-pause--small{
  min-height:42vh;
}

.ct-specimen-page .ct-specimen-inuse{
  min-height:112vh;
  padding:clamp(20px, 3vw, 48px);
  background:#0b0b0b;
  color:var(--ct-paper);
}

.ct-specimen-page .ct-specimen-inuse__frame{
  position:relative;
  min-height:calc(112vh - clamp(40px, 6vw, 96px));
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(249,246,240,.09) 1px, transparent 1px) 0 0 / 8.333% 100%,
    linear-gradient(180deg, rgba(249,246,240,.08) 1px, transparent 1px) 0 0 / 100% 12.5%,
    radial-gradient(circle at 68% 24%, rgba(59,27,34,.56), transparent 26%),
    #111;
}

.ct-specimen-page .ct-specimen-inuse__frame::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(249,246,240,.16) 42.2% 42.6%, transparent 42.8%),
    repeating-linear-gradient(155deg, transparent 0 28px, rgba(249,246,240,.035) 29px 30px);
  opacity:.82;
}

.ct-specimen-page .ct-specimen-inuse__plate{
  position:absolute;
  inset:clamp(22px, 4vw, 72px);
  display:grid;
  align-content:space-between;
  font-family:var(--ct-fill);
  font-size:clamp(78px, 16vw, 286px);
  line-height:.76;
  letter-spacing:-.06em;
  text-transform:uppercase;
}

.ct-specimen-page .ct-specimen-inuse__plate span:nth-child(2){
  justify-self:end;
  font-family:var(--ct-parth);
}

.ct-specimen-page .ct-specimen-inuse__plate span:nth-child(3){
  justify-self:center;
  font-family:var(--ct-stroke);
}

.ct-specimen-page .ct-specimen-inuse__signal{
  position:absolute;
  right:-.12em;
  bottom:-.28em;
  color:rgba(249,246,240,.09);
  font-family:var(--ct-fill);
  font-size:76vw;
  line-height:.7;
}

.ct-specimen-page .ct-specimen-inuse__caption{
  position:absolute;
  left:clamp(22px, 4vw, 72px);
  bottom:clamp(24px, 4vw, 72px);
  width:min(650px, calc(100% - 44px));
  margin:0;
  font-size:clamp(26px, 3.6vw, 68px);
  line-height:.98;
  letter-spacing:0;
}

.ct-specimen-page .ct-specimen-character{
  display:grid;
  grid-template-columns:minmax(0, 1.18fr) minmax(360px, .82fr);
  gap:clamp(42px, 8vw, 150px);
  min-height:118vh;
  padding:clamp(120px, 15vw, 240px) clamp(18px, 4vw, 72px);
  border-bottom:1px solid var(--ct-line);
}

.ct-specimen-page .ct-specimen-character__words{
  display:grid;
  align-content:center;
  gap:8px;
  font-family:var(--ct-fill);
  font-size:clamp(74px, 12vw, 230px);
  line-height:.75;
  letter-spacing:-.06em;
}

.ct-specimen-page .ct-specimen-character__words span:nth-child(2){
  font-family:var(--ct-parth);
}

.ct-specimen-page .ct-specimen-character__words span:nth-child(3){
  font-family:var(--ct-stroke);
}

.ct-specimen-page .ct-specimen-character__words span:last-child{
  color:var(--ct-accent);
}

.ct-specimen-page .ct-specimen-character__notes{
  display:grid;
  align-content:center;
  gap:36px;
}

.ct-specimen-page .ct-specimen-character__notes p{
  margin:0;
  max-width:560px;
  color:rgba(26,26,26,.74);
  font-size:clamp(19px, 1.95vw, 34px);
  line-height:1.12;
}

.ct-specimen-page .ct-specimen-character__details{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  border-top:1px solid var(--ct-line);
  border-left:1px solid var(--ct-line);
}

.ct-specimen-page .ct-specimen-character__details span{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1;
  border-right:1px solid var(--ct-line);
  border-bottom:1px solid var(--ct-line);
  font-family:var(--ct-fill);
  font-size:clamp(92px, 9.5vw, 190px);
  line-height:.8;
}

.ct-specimen-page .ct-specimen-character__details span::after{
  content:attr(data-ct-detail);
  position:absolute;
  left:12px;
  bottom:12px;
  color:var(--ct-muted);
  font-family:Inter, ui-sans-serif, system-ui, sans-serif;
  font-size:10px;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
}

.ct-specimen-page .ct-specimen-character__details span:nth-child(2){
  font-family:var(--ct-parth);
}

.ct-specimen-page .ct-specimen-character__details span:nth-child(3){
  font-family:var(--ct-stroke);
}

.ct-specimen-page .ct-specimen-character__details span:nth-child(4){
  font-family:var(--ct-parth);
}

.ct-specimen-page .ct-preview{
  display:grid;
  grid-template-columns:minmax(240px, 22vw) minmax(0, 1fr);
  min-height:118vh;
  border-bottom:1px solid var(--ct-line);
}

.ct-specimen-page .ct-preview__panel{
  display:grid;
  align-content:start;
  gap:clamp(58px, 10vh, 112px);
  padding:clamp(54px, 7vw, 110px) clamp(18px, 2.6vw, 38px);
  border-right:1px solid rgba(26,26,26,.08);
  opacity:.78;
}

.ct-specimen-page .ct-preview__input-wrap{
  display:grid;
  gap:18px;
  color:var(--ct-muted);
  font-size:11px;
  text-transform:uppercase;
}

.ct-specimen-page .ct-preview__input{
  width:100%;
  min-height:160px;
  resize:vertical;
  border:0;
  border-top:1px solid rgba(26,26,26,.075);
  border-bottom:1px solid rgba(26,26,26,.075);
  border-radius:0;
  padding:14px 0;
  background:transparent;
  color:rgba(26,26,26,.78);
  font:14px/1.28 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  outline:none;
}

.ct-specimen-page .ct-preview__input:focus{
  border-color:rgba(59,27,34,.28);
}

.ct-specimen-page .ct-preview__controls{
  display:grid;
  gap:28px;
}

.ct-specimen-page .ct-preview__control{
  display:grid;
  grid-template-columns:70px minmax(0, 1fr);
  align-items:center;
  gap:20px;
  color:var(--ct-muted);
  font-size:11px;
  text-transform:uppercase;
}

.ct-specimen-page .ct-preview__control input{
  width:100%;
  accent-color:var(--ct-ink);
  opacity:.48;
}

.ct-specimen-page .ct-preview__control input::-webkit-slider-runnable-track{
  height:1px;
}

.ct-specimen-page .ct-preview__control input::-moz-range-track{
  height:1px;
}

.ct-specimen-page .ct-preview__control input::-webkit-slider-thumb{
  transform:scale(.72);
  transform-origin:center;
}

.ct-specimen-page .ct-preview__control input::-moz-range-thumb{
  transform:scale(.72);
  transform-origin:center;
}

.ct-specimen-page .ct-preview__output{
  --ct-preview-size:176px;
  --ct-preview-width:96;
  --ct-preview-spacing:-2px;
  --ct-preview-leading:.8;
  display:flex;
  align-items:center;
  min-width:0;
  padding:clamp(38px, 7vw, 132px);
  overflow:hidden;
  font-family:var(--ct-fill);
  font-size:var(--ct-preview-size);
  line-height:var(--ct-preview-leading);
  letter-spacing:var(--ct-preview-spacing);
  transform:scaleX(calc(var(--ct-preview-width) / 100));
  transform-origin:left center;
  overflow-wrap:anywhere;
  transition:font-family .24s ease, transform .28s cubic-bezier(.2, .7, .2, 1), letter-spacing .28s ease;
  will-change:transform;
}

.ct-specimen-page .ct-specimen-rhythm,
.ct-specimen-page .ct-glyph,
.ct-specimen-page .ct-specimen-opentype,
.ct-specimen-page .ct-specimen-gallery,
.ct-specimen-page .ct-tech,
.ct-specimen-page .ct-specimen-about,
.ct-specimen-page .ct-specimen-final{
  padding:clamp(110px, 14vw, 230px) clamp(18px, 4vw, 72px);
  border-bottom:1px solid var(--ct-line);
}

.ct-specimen-page .ct-specimen-rhythm__head,
.ct-specimen-page .ct-specimen-opentype__head,
.ct-specimen-page .ct-specimen-gallery__head{
  display:grid;
  gap:18px;
  margin-bottom:clamp(54px, 8vw, 130px);
}

.ct-specimen-page .ct-specimen-rhythm__title,
.ct-specimen-page .ct-glyph__title,
.ct-specimen-page .ct-specimen-opentype__title,
.ct-specimen-page .ct-specimen-gallery__title,
.ct-specimen-page .ct-tech__title,
.ct-specimen-page .ct-specimen-about__title{
  max-width:920px;
  margin:0;
  font-family:var(--ct-fill);
  font-size:clamp(48px, 7.2vw, 146px);
  font-weight:400;
  line-height:.88;
  letter-spacing:-.05em;
}

.ct-specimen-page .ct-specimen-rhythm__set{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1px;
  background:var(--ct-line);
}

.ct-specimen-page .ct-specimen-rhythm__sample{
  min-height:340px;
  padding:clamp(26px, 4vw, 64px);
  background:var(--ct-paper);
  overflow:hidden;
}

.ct-specimen-page .ct-specimen-rhythm__sample--display{
  grid-column:1 / -1;
  font-family:var(--ct-fill);
  min-height:62vh;
  font-size:clamp(86px, 15vw, 286px);
  line-height:.68;
  letter-spacing:-.07em;
}

.ct-specimen-page .ct-specimen-rhythm__sample--editorial{
  max-width:none;
  color:rgba(26,26,26,.74);
  font-size:clamp(22px, 2.3vw, 40px);
  line-height:1.02;
}

.ct-specimen-page .ct-specimen-rhythm__sample--dense{
  font-family:var(--ct-parth);
  font-size:clamp(50px, 7vw, 134px);
  line-height:.82;
  letter-spacing:-.04em;
}

.ct-specimen-page .ct-specimen-rhythm__sample--wide{
  grid-column:1 / -1;
  min-height:260px;
  font-family:var(--ct-stroke);
  font-size:clamp(42px, 7.4vw, 146px);
  line-height:.9;
  letter-spacing:.12em;
}

.ct-specimen-page .ct-glyph__intro{
  display:grid;
  gap:18px;
  margin-bottom:clamp(58px, 8vw, 132px);
}

.ct-specimen-page .ct-glyph__stage{
  display:grid;
  grid-template-columns:minmax(0, .84fr) minmax(420px, 48vw);
  gap:clamp(18px, 3vw, 48px);
  min-height:94vh;
  background:transparent;
}

.ct-specimen-page .ct-glyph__groups{
  display:grid;
  align-content:start;
  gap:clamp(18px, 2.4vw, 38px);
  background:transparent;
}

.ct-specimen-page .ct-glyph__group{
  display:grid;
  grid-template-columns:120px minmax(0, 1fr);
  gap:1px;
  background:var(--ct-line);
}

.ct-specimen-page .ct-glyph__group-title{
  margin:0;
  padding:16px;
  background:var(--ct-paper);
  color:var(--ct-muted);
  font-size:12px;
  line-height:1;
  text-transform:uppercase;
}

.ct-specimen-page .ct-glyph__cells{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(58px, 1fr));
  gap:1px;
  background:var(--ct-line);
}

.ct-specimen-page .ct-glyph__cell{
  display:grid;
  place-items:center;
  min-height:70px;
  border:0;
  border-radius:0;
  background:var(--ct-paper);
  color:var(--ct-ink);
  font-family:var(--ct-fill);
  font-size:38px;
  line-height:1;
  cursor:pointer;
  transition:background .34s ease, color .34s ease, transform .34s ease;
}

.ct-specimen-page .ct-glyph__cell:hover,
.ct-specimen-page .ct-glyph__cell:focus-visible,
.ct-specimen-page .ct-glyph__cell.is-active{
  background:var(--ct-ink);
  color:var(--ct-paper);
  outline:none;
  transform:translateZ(0) scale(.96);
}

.ct-specimen-page .ct-glyph__preview{
  position:sticky;
  top:0;
  display:grid;
  align-content:space-between;
  min-height:94vh;
  padding:clamp(26px, 4vw, 68px);
  background:var(--ct-paper);
  overflow:hidden;
}

.ct-specimen-page .ct-glyph__preview::before{
  content:"";
  position:absolute;
  inset:clamp(14px, 2vw, 28px);
  border:1px solid var(--ct-line);
  pointer-events:none;
}

.ct-specimen-page .ct-glyph__large{
  position:relative;
  justify-self:center;
  align-self:center;
  font-family:var(--ct-fill);
  font-size:clamp(320px, 52vw, 920px);
  line-height:.56;
  letter-spacing:-.08em;
  transform:translate3d(0, 0, 0);
  transition:opacity .42s ease, transform .8s cubic-bezier(.18, .72, .16, 1), font-family .28s ease;
  will-change:transform, opacity;
}

.ct-specimen-page .ct-glyph__large.is-changing{
  opacity:.18;
  transform:translate3d(0, 18px, 0) scale(.985);
}

.ct-specimen-page .ct-glyph__meta{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1px;
  color:var(--ct-muted);
  font-size:12px;
  line-height:1.15;
  text-transform:uppercase;
}

.ct-specimen-page .ct-glyph__meta span{
  border-top:1px solid var(--ct-line);
  padding-top:12px;
}

.ct-specimen-page .ct-specimen-opentype__demos{
  display:grid;
  gap:1px;
  background:var(--ct-line);
}

.ct-specimen-page .ct-specimen-opentype__demo{
  position:relative;
  display:grid;
  grid-template-columns:160px minmax(0, 1fr);
  align-items:center;
  min-height:210px;
  padding:clamp(24px, 3.8vw, 58px);
  background:var(--ct-paper);
  overflow:hidden;
}

.ct-specimen-page .ct-specimen-opentype__demo span{
  color:var(--ct-muted);
  font-size:12px;
  text-transform:uppercase;
}

.ct-specimen-page .ct-specimen-opentype__demo strong{
  grid-column:2;
  grid-row:1;
  font-family:var(--ct-fill);
  font-size:clamp(56px, 8.8vw, 164px);
  font-weight:400;
  line-height:.8;
  letter-spacing:-.04em;
  transition:opacity .9s ease, transform .9s cubic-bezier(.18, .72, .16, 1);
}

.ct-specimen-page .ct-specimen-opentype__demo strong[data-ct-feature-b]{
  opacity:0;
  transform:translateY(18px);
  font-family:var(--ct-parth);
}

.ct-specimen-page .ct-specimen-opentype__demo.is-flipped strong[data-ct-feature-a]{
  opacity:0;
  transform:translateY(-18px);
}

.ct-specimen-page .ct-specimen-opentype__demo.is-flipped strong[data-ct-feature-b]{
  opacity:1;
  transform:translateY(0);
}

.ct-specimen-page .ct-specimen-gallery__items{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:1px;
  background:var(--ct-line);
}

.ct-specimen-page .ct-specimen-gallery__item{
  position:relative;
  display:grid;
  align-content:space-between;
  min-height:52vh;
  padding:clamp(22px, 3vw, 46px);
  background:var(--ct-paper);
  overflow:hidden;
}

.ct-specimen-page .ct-specimen-gallery__item span{
  font-family:var(--ct-fill);
  font-size:clamp(58px, 8vw, 158px);
  line-height:.72;
  letter-spacing:-.05em;
}

.ct-specimen-page .ct-specimen-gallery__item small{
  color:var(--ct-muted);
  font-size:12px;
  text-transform:uppercase;
}

.ct-specimen-page .ct-specimen-gallery__item--poster{
  grid-column:span 7;
  min-height:72vh;
  background:#111;
  color:var(--ct-paper);
}

.ct-specimen-page .ct-specimen-gallery__item--editorial{
  grid-column:span 5;
  min-height:72vh;
}

.ct-specimen-page .ct-specimen-gallery__item--editorial span{
  font-family:var(--ct-stroke);
  font-size:clamp(48px, 6.3vw, 118px);
  letter-spacing:.02em;
}

.ct-specimen-page .ct-specimen-gallery__item--fashion span{
  font-family:var(--ct-parth);
}

.ct-specimen-page .ct-specimen-gallery__item--fashion{
  grid-column:span 4;
  background:linear-gradient(180deg, #f9f6f0 0%, #ece4da 100%);
}

.ct-specimen-page .ct-specimen-gallery__item--signage{
  grid-column:span 8;
  background:var(--ct-accent);
  color:var(--ct-paper);
}

.ct-specimen-page .ct-specimen-gallery__item--interface span{
  font-family:var(--ct-stroke);
}

.ct-specimen-page .ct-specimen-gallery__item--interface{
  grid-column:span 8;
  background:var(--ct-graphite);
  color:var(--ct-paper);
}

.ct-specimen-page .ct-specimen-gallery__item::after{
  content:"";
  position:absolute;
  inset:auto 20px 72px;
  height:1px;
  background:currentColor;
  opacity:.2;
}

.ct-specimen-page .ct-tech{
  display:grid;
  gap:clamp(42px, 6vw, 90px);
}

.ct-specimen-page .ct-tech__table{
  display:grid;
  margin:0;
  border-top:1px solid var(--ct-line);
}

.ct-specimen-page .ct-tech__table div{
  display:grid;
  grid-template-columns:minmax(150px, .35fr) minmax(0, 1fr);
  border-bottom:1px solid var(--ct-line);
  padding:22px 0;
}

.ct-specimen-page .ct-tech__table dt{
  color:var(--ct-muted);
  font-size:12px;
  text-transform:uppercase;
}

.ct-specimen-page .ct-tech__table dd{
  margin:0;
  font-family:var(--ct-fill);
  font-size:clamp(30px, 4.2vw, 76px);
  line-height:.82;
  letter-spacing:-.04em;
}

.ct-specimen-page .ct-specimen-about{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(300px, 36vw);
  gap:clamp(28px, 6vw, 110px);
  align-items:end;
}

.ct-specimen-page .ct-specimen-about__text{
  display:grid;
  gap:24px;
}

.ct-specimen-page .ct-specimen-about__text p:last-child{
  max-width:720px;
  margin:0;
  color:rgba(26,26,26,.74);
  font-size:clamp(19px, 2vw, 32px);
  line-height:1.16;
}

.ct-specimen-page .ct-specimen-about__process{
  display:grid;
  border-top:1px solid var(--ct-line);
}

.ct-specimen-page .ct-specimen-about__process span{
  border-bottom:1px solid var(--ct-line);
  padding:18px 0;
  color:var(--ct-muted);
  font-size:12px;
  text-transform:uppercase;
}

.ct-specimen-page .ct-specimen-final{
  display:grid;
  align-content:center;
  min-height:112vh;
  min-height:112svh;
  text-align:center;
  overflow:hidden;
}

.ct-specimen-page .ct-specimen-final__word{
  margin:0;
  font-family:var(--ct-fill);
  font-size:clamp(150px, 31vw, 660px);
  font-weight:400;
  line-height:.54;
  letter-spacing:-.075em;
}

.ct-specimen-page .ct-specimen-final__line{
  width:min(540px, 92vw);
  margin:28px auto 0;
  color:rgba(26,26,26,.74);
  font-size:clamp(22px, 3vw, 46px);
  line-height:1;
}

.ct-specimen-page .ct-specimen-final__actions{
  display:flex;
  justify-content:center;
  gap:22px;
  margin-top:42px;
  color:var(--ct-muted);
  font-size:12px;
  text-transform:uppercase;
}

.ct-specimen-page .ct-specimen-final__actions a:hover{
  color:var(--ct-accent);
}

@media (prefers-reduced-motion:no-preference){
  .ct-specimen-page .ct-specimen-inuse__plate,
  .ct-specimen-page .ct-specimen-gallery__item span{
    animation:ct-specimen-breathe 14s ease-in-out infinite alternate;
    will-change:transform;
  }

  .ct-specimen-page .ct-specimen-gallery__item:nth-child(2n) span{
    animation-delay:-2s;
  }
}

@keyframes ct-specimen-breathe{
  from{ transform:translate3d(0, 0, 0); }
  to{ transform:translate3d(0, -5px, 0); }
}

@media (max-width: 980px){
  .ct-specimen-page .ct-specimen-character,
  .ct-specimen-page .ct-preview,
  .ct-specimen-page .ct-glyph__stage,
  .ct-specimen-page .ct-specimen-about{
    grid-template-columns:1fr;
  }

  .ct-specimen-page .ct-preview__panel{
    border-right:0;
    border-bottom:1px solid var(--ct-line);
  }

  .ct-specimen-page .ct-preview__output{
    min-height:56vh;
  }

  .ct-specimen-page .ct-glyph__preview{
    position:relative;
    min-height:46vh;
  }

  .ct-specimen-page .ct-specimen-rhythm__set{
    grid-template-columns:1fr;
  }

  .ct-specimen-page .ct-specimen-rhythm__sample,
  .ct-specimen-page .ct-specimen-rhythm__sample--wide{
    grid-column:auto;
  }

  .ct-specimen-page .ct-specimen-gallery__items{
    grid-template-columns:1fr;
  }

  .ct-specimen-page .ct-specimen-gallery__item,
  .ct-specimen-page .ct-specimen-gallery__item--poster,
  .ct-specimen-page .ct-specimen-gallery__item--editorial,
  .ct-specimen-page .ct-specimen-gallery__item--signage,
  .ct-specimen-page .ct-specimen-gallery__item--interface,
  .ct-specimen-page .ct-specimen-gallery__item--fashion{
    grid-column:auto;
  }
}

@media (max-width: 640px){
  .ct-specimen-page{
    overflow:visible;
  }

  .ct-specimen-page .ct-specimen-header{
    position:absolute;
    padding:16px;
    font-size:11px;
  }

  .ct-specimen-page .ct-specimen-header__nav{
    gap:12px;
  }

  .ct-specimen-page .ct-specimen-header__link:nth-child(n+3){
    display:none;
  }

  .ct-specimen-page .ct-hero{
    padding-inline:12px;
  }

  .ct-specimen-page .ct-hero__kicker{
    left:12px;
    bottom:86px;
  }

  .ct-specimen-page .ct-hero__word,
  .ct-specimen-page .ct-specimen-final__word{
  font-size:clamp(142px, 46vw, 250px);
    white-space:normal;
    text-align:center;
  }

  .ct-specimen-page .ct-hero__meta{
    gap:12px;
  }

  .ct-specimen-page .ct-hero__meta span:nth-child(n+4){
    display:none;
  }

  .ct-specimen-page .ct-specimen-pause{
    min-height:46vh;
    padding-inline:14px;
  }

  .ct-specimen-page .ct-specimen-pause p{
    font-size:clamp(44px, 15vw, 76px);
  }

  .ct-specimen-page .ct-specimen-inuse{
    padding:0;
  }

  .ct-specimen-page .ct-specimen-inuse__frame{
    min-height:100svh;
  }

  .ct-specimen-page .ct-specimen-character,
  .ct-specimen-page .ct-specimen-rhythm,
  .ct-specimen-page .ct-glyph,
  .ct-specimen-page .ct-specimen-opentype,
  .ct-specimen-page .ct-specimen-gallery,
  .ct-specimen-page .ct-tech,
  .ct-specimen-page .ct-specimen-about,
  .ct-specimen-page .ct-specimen-final{
    padding-inline:14px;
  }

  .ct-specimen-page .ct-specimen-character{
    min-height:0;
  }

  .ct-specimen-page .ct-specimen-character__details{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .ct-specimen-page .ct-preview{
    min-height:0;
  }

  .ct-specimen-page .ct-preview__panel{
    gap:36px;
    padding:54px 14px 28px;
    border-right:0;
    opacity:.82;
  }

  .ct-specimen-page .ct-preview__controls{
    gap:18px;
  }

  .ct-specimen-page .ct-preview__control{
    grid-template-columns:76px minmax(0, 1fr);
  }

  .ct-specimen-page .ct-preview__output{
    --ct-preview-size:min(104px, 26vw);
    --ct-preview-width:100;
    min-height:62vh;
    padding:30px 14px 48px;
  }

  .ct-specimen-page .ct-glyph__group{
    grid-template-columns:1fr;
  }

  .ct-specimen-page .ct-glyph__cells{
    grid-template-columns:repeat(auto-fill, minmax(44px, 1fr));
  }

  .ct-specimen-page .ct-glyph__cell{
    min-height:52px;
    font-size:30px;
  }

  .ct-specimen-page .ct-glyph__meta{
    grid-template-columns:1fr 1fr;
  }

  .ct-specimen-page .ct-specimen-opentype__demo{
    grid-template-columns:1fr;
    gap:18px;
    min-height:150px;
  }

  .ct-specimen-page .ct-specimen-opentype__demo strong{
    grid-column:1;
    grid-row:2;
  }

  .ct-specimen-page .ct-specimen-gallery__item{
    min-height:430px;
  }

  .ct-specimen-page .ct-tech__table div{
    grid-template-columns:1fr;
    gap:12px;
  }
}