:root{
  --brand-walnut:#24160E;
  --brand-olive:#666131;
  --brand-stone:#B6946C;
  --brand-sand:#E4D9C8;
  --brand-ivory:#F7F1E7;
  --brand-ink:#1D1712;
  --brand-stone-soft:#C9A882;
  --system-accent:#2F6CB3;
  --system-accent-deep:#255894;
  --system-accent-soft:#DCE9F8;
  --font-brand:serif;
  --page-max:1160px;
  --radius:26px;
  --radius-sm:16px;
  --shadow-soft:0 24px 60px rgba(36,22,14,.08);
  --shadow-card:0 12px 32px rgba(36,22,14,.06);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--brand-ivory);
  color:var(--brand-ink);
  font-family:var(--font-brand);
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit}

.boot-screen{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  background:linear-gradient(180deg,var(--brand-ivory),#efe6d2);
  color:rgba(29,23,18,.7);
  font-size:1rem;
}
.boot-screen strong{font-size:1.1rem;color:var(--brand-ink)}
.boot-screen a{
  margin-top:.6rem;
  color:var(--system-accent);
  text-decoration:underline;
}

.site-nav{
  position:fixed;
  top:0;
  right:0;
  left:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  padding:1rem 2rem;
  background:linear-gradient(90deg,var(--system-accent-deep),var(--system-accent));
  border-bottom:1px solid rgba(220,233,248,.18);
  box-shadow:0 12px 30px rgba(21,52,93,.16);
  backdrop-filter:blur(12px);
  direction:ltr;
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:.85rem;
  min-width:0;
}
.nav-brand img{
  width:40px;
  height:40px;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(12,29,52,.16);
}
.nav-brand-copy{
  display:flex;
  flex-direction:column;
  gap:.1rem;
  min-width:0;
}
.nav-kicker{
  font-size:.56rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.nav-title{
  font-size:.84rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
}
.nav-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:.2rem;
  list-style:none;
}
.nav-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .72rem;
  border-radius:999px;
  text-decoration:none;
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(220,233,248,.78);
  transition:background .25s,color .25s;
}
.nav-links a:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
}
.nav-home{
  border:1px solid rgba(255,255,255,.22);
  margin-inline-end:.4rem;
}

.main{
  padding-top:72px;
}

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7rem 2rem 5rem;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 75%, rgba(255,255,255,.05), transparent 24%),
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.05), transparent 20%),
    linear-gradient(180deg,var(--brand-walnut),#2f1f15);
}
.hero-wave{
  position:absolute;
  inset:auto -8% -2% -8%;
  opacity:.08;
  pointer-events:none;
}
.hero-wave path{stroke:var(--brand-sand)}
.hero-inner{
  position:relative;
  z-index:1;
  width:min(100%,960px);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-logo{
  width:clamp(220px,28vw,360px);
  margin-bottom:2.4rem;
}
.hero-label-ar,
.hero-label-en,
.hero-badge,
.eyebrow,
.eyebrow-ar,
.section-index,
.mini-label,
.mini-label-ar{
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hero-label-ar{
  color:rgba(228,217,200,.82);
  font-size:1rem;
  margin-bottom:.8rem;
}
.hero-label-en{
  color:rgba(201,168,130,.82);
  font-size:.64rem;
  margin-bottom:1.1rem;
}
.hero-title-ar{
  color:var(--brand-sand);
  font-size:clamp(2.7rem,6vw,5rem);
  line-height:1.3;
  margin-bottom:.35rem;
}
.hero-title-en{
  color:rgba(255,255,255,.88);
  font-size:clamp(1.8rem,3.6vw,3.4rem);
  line-height:1.1;
}
.hero-tagline-ar{
  margin-top:1.8rem;
  color:rgba(228,217,200,.78);
  font-size:clamp(1rem,1.85vw,1.2rem);
  line-height:1.95;
  max-width:680px;
}
.hero-tagline-en{
  margin-top:.7rem;
  color:rgba(201,168,130,.92);
  font-size:clamp(.86rem,1.4vw,1rem);
  line-height:1.85;
  max-width:620px;
}
.hero-badge{
  margin-top:2.2rem;
  padding:.7rem 1.25rem;
  border:1px solid rgba(182,148,108,.24);
  color:rgba(228,217,200,.7);
  font-size:.62rem;
}

.section{
  position:relative;
  overflow:hidden;
  padding:5.7rem 2rem;
}
.section-light{background:var(--brand-ivory)}
.section-soft{background:#EEE5D4}
.section-dark{background:var(--brand-walnut);color:rgba(228,217,200,.9)}
.section-dark .eyebrow,
.section-dark .section-index,
.section-dark .mini-label{color:rgba(182,148,108,.82)}
.section-dark .section-title-en{color:rgba(255,255,255,.84)}
.section-dark .section-title-ar{color:var(--brand-sand)}
.section-dark .section-rule{background:var(--brand-stone)}

.section-surface{
  position:absolute;
  pointer-events:none;
  opacity:.07;
}
.section-surface svg{display:block}

.container{
  position:relative;
  z-index:1;
  width:min(100%,var(--page-max));
  margin:0 auto;
}
.section-top{
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  align-items:flex-start;
  margin-bottom:2.4rem;
}
.section-index{
  font-size:.62rem;
  color:var(--brand-stone);
  opacity:.7;
}
.section-heading{
  max-width:700px;
}
.eyebrow-ar{
  display:block;
  color:var(--brand-stone);
  font-size:.95rem;
  margin-bottom:.55rem;
}
.eyebrow{
  display:block;
  color:var(--brand-stone);
  font-size:.58rem;
  margin-bottom:.9rem;
}
.section-title-ar{
  color:var(--brand-walnut);
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.33;
}
.section-title-en{
  margin-top:.5rem;
  color:rgba(36,22,14,.82);
  font-size:clamp(1.45rem,2.8vw,2.7rem);
  line-height:1.15;
}
.section-rule{
  width:52px;
  height:1px;
  background:var(--brand-stone);
  margin-top:1.4rem;
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.4rem;
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.4rem;
}
.stack{display:grid;gap:1.4rem}
.panel{
  padding:1.4rem;
  border:1px solid rgba(182,148,108,.18);
  background:rgba(247,241,231,.7);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);
}
.section-dark .panel{
  background:rgba(247,241,231,.05);
  border-color:rgba(182,148,108,.18);
  box-shadow:none;
}
.panel-title{
  color:var(--brand-walnut);
  font-size:1.05rem;
  margin-bottom:.45rem;
}
.section-dark .panel-title{color:var(--brand-sand)}
.panel-copy{
  color:rgba(29,23,18,.78);
  font-size:.94rem;
  line-height:1.88;
}
.section-dark .panel-copy{color:rgba(228,217,200,.72)}

.foundation-note{
  max-width:660px;
  color:rgba(29,23,18,.8);
  font-size:1rem;
  line-height:2;
}
.keyword-row{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}
.chip{
  padding:.45rem .8rem;
  border-radius:999px;
  border:1px solid rgba(182,148,108,.22);
  background:rgba(247,241,231,.82);
  font-size:.8rem;
  color:var(--brand-walnut);
}

.logo-variants,
.swatch-grid,
.icon-grid,
.application-grid,
.summary-grid,
.rule-grid,
.misuse-grid{
  display:grid;
  gap:1.2rem;
}
.logo-variants{grid-template-columns:repeat(4,minmax(0,1fr))}
.swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.icon-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.application-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.rule-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.misuse-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

.logo-box,
.app-card,
.icon-card,
.swatch-card,
.misuse-card{
  border-radius:var(--radius-sm);
  overflow:hidden;
  border:1px solid rgba(182,148,108,.18);
}
.logo-box{
  background:rgba(247,241,231,.72);
  display:flex;
  flex-direction:column;
}
.logo-stage{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.logo-stage img{width:min(100%,180px)}
.logo-meta{
  padding:1rem;
  background:rgba(247,241,231,.85);
}
.logo-meta strong{
  display:block;
  color:var(--brand-walnut);
  font-size:.95rem;
}
.logo-meta span{
  display:block;
  color:rgba(29,23,18,.7);
  font-size:.82rem;
  line-height:1.7;
  margin-top:.2rem;
}

.clearspace-grid{
  display:grid;
  grid-template-columns:minmax(280px,.92fr) minmax(0,1.18fr);
  gap:1.4rem;
  margin-top:1.4rem;
}
.clearspace-card{
  border-radius:var(--radius-sm);
  border:1px solid rgba(182,148,108,.18);
  background:rgba(247,241,231,.72);
  padding:1.4rem;
}
.clearspace-card h3{
  color:var(--brand-walnut);
  font-size:1.18rem;
  margin-bottom:.65rem;
}
.clearspace-card p,
.clearspace-card li{
  color:rgba(29,23,18,.76);
  font-size:.9rem;
  line-height:1.86;
}
.clearspace-card ul{
  list-style:none;
  display:grid;
  gap:.5rem;
  margin-top:1rem;
}
.clearspace-diagram{
  --gap:66px;
  position:relative;
  min-height:340px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(182,148,108,.22);
  background:linear-gradient(180deg,rgba(247,241,231,.92),rgba(233,223,205,.76));
}
.clearspace-figure{
  border-radius:var(--radius-sm);
  border:1px solid rgba(182,148,108,.22);
  background:linear-gradient(180deg,rgba(247,241,231,.96),rgba(239,231,216,.88));
  padding:1.2rem;
  box-shadow:var(--shadow-card);
}
.clearspace-figure img{
  width:100%;
  height:auto;
  border-radius:12px;
  background:#fff;
}
.clearspace-note{
  display:block;
  margin-top:.75rem;
  color:rgba(29,23,18,.68);
  font-size:.82rem;
  line-height:1.75;
}
.safe-area{
  position:absolute;
  inset:1.4rem;
  border:1px dashed rgba(182,148,108,.48);
}
.live-area{
  position:absolute;
  inset:calc(1.4rem + var(--gap));
  border:1px solid rgba(182,148,108,.56);
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.16);
}
.live-area img{width:min(100%,250px)}
.measure-tag{
  position:absolute;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--brand-ivory);
  color:var(--brand-walnut);
  border:1px solid rgba(182,148,108,.2);
  font-size:.82rem;
}
.measure-top{top:calc(1.4rem + (var(--gap) / 2) - 15px);left:50%;transform:translateX(-50%)}
.measure-right{top:50%;right:calc(1.4rem + (var(--gap) / 2) - 15px);transform:translateY(-50%)}
.measure-bottom{bottom:calc(1.4rem + (var(--gap) / 2) - 15px);left:50%;transform:translateX(-50%)}
.measure-left{top:50%;left:calc(1.4rem + (var(--gap) / 2) - 15px);transform:translateY(-50%)}
.diagram-note{
  position:absolute;
  right:1.2rem;
  top:1.2rem;
  color:var(--brand-stone);
  font-size:.8rem;
}

.misuse-card{
  position:relative;
  background:rgba(247,241,231,.82);
}
.misuse-card::after{
  content:"";
  position:absolute;
  top:12px;
  left:12px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#8B1A1A;
}
.misuse-card::before{
  content:"";
  position:absolute;
  top:22px;
  left:17px;
  width:12px;
  height:2px;
  background:#fff;
  transform:rotate(-45deg);
  z-index:1;
}
.misuse-sample{
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.1rem;
  border-bottom:1px solid rgba(182,148,108,.14);
  background:var(--brand-sand);
}
.misuse-sample img{max-width:130px}
.misuse-stretch img{transform:scaleX(1.25)}
.misuse-rotate img{transform:rotate(-10deg)}
.misuse-shadow img{filter:drop-shadow(0 8px 12px rgba(29,23,18,.35))}
.misuse-busy{
  background:
    radial-gradient(circle at 22% 26%, rgba(182,148,108,.52), transparent 28%),
    radial-gradient(circle at 78% 36%, rgba(102,97,49,.45), transparent 24%),
    linear-gradient(135deg,#efe6d8,#cdb08a);
}
.misuse-copy{
  padding:1rem;
}
.misuse-copy strong{
  display:block;
  color:var(--brand-walnut);
  font-size:.9rem;
}
.misuse-copy span{
  display:block;
  color:rgba(29,23,18,.72);
  font-size:.78rem;
  line-height:1.65;
  margin-top:.25rem;
}

.swatch-card{
  background:rgba(247,241,231,.08);
}
.swatch-block{
  height:156px;
  border-bottom:1px solid rgba(182,148,108,.16);
}
.swatch-meta{
  padding:1rem;
  min-height:220px;
}
.swatch-meta strong{
  display:block;
  font-size:.95rem;
  color:var(--brand-sand);
}
.swatch-meta .sub{
  display:block;
  font-size:.82rem;
  color:rgba(228,217,200,.72);
  margin-top:.12rem;
}
.swatch-meta .hex{
  display:block;
  margin:.45rem 0;
  color:var(--brand-stone);
  font-size:.72rem;
  letter-spacing:.12em;
}
.swatch-meta p{
  color:rgba(228,217,200,.62);
  font-size:.82rem;
  line-height:1.72;
}

.ratio-bar{
  display:grid;
  grid-template-columns:var(--ratio-template,50fr 25fr 15fr 10fr);
  height:20px;
  border:1px solid rgba(182,148,108,.18);
  overflow:hidden;
  border-radius:999px;
  margin-bottom:.9rem;
}
.ratio-segment{height:100%}

.pair-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem;
}
.pair-card{
  border:1px solid rgba(182,148,108,.16);
  border-radius:14px;
  overflow:hidden;
}
.pair-swatch{
  height:64px;
}
.pair-copy{
  padding:.9rem;
}
.pair-copy strong{
  display:block;
  color:var(--brand-sand);
  font-size:.9rem;
}
.pair-copy span{
  display:block;
  color:rgba(228,217,200,.66);
  font-size:.78rem;
  line-height:1.6;
  margin-top:.22rem;
}

.type-samples{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.4rem;
}
.sample-block{
  padding:1.4rem;
  border-radius:var(--radius-sm);
  border:1px solid rgba(182,148,108,.18);
  background:rgba(247,241,231,.68);
}
.sample-block .mini-label-ar{
  color:var(--brand-stone);
  font-size:.9rem;
  margin-bottom:.2rem;
}
.sample-block .mini-label{
  color:rgba(182,148,108,.82);
  font-size:.58rem;
  margin-bottom:1rem;
}
.sample-title-ar{
  font-size:clamp(1.8rem,4vw,3rem);
  line-height:1.35;
  color:var(--brand-walnut);
}
.sample-title-en{
  font-size:clamp(1.8rem,4vw,3rem);
  line-height:1.08;
  color:var(--brand-walnut);
}
.sample-body{
  color:rgba(29,23,18,.78);
  line-height:1.95;
  font-size:1rem;
}
.type-table{
  margin-top:1.4rem;
  overflow:auto;
  border:1px solid rgba(182,148,108,.18);
  border-radius:var(--radius-sm);
  background:rgba(247,241,231,.72);
}
.type-table table{width:100%;border-collapse:collapse}
.type-table th,
.type-table td{
  padding:1rem;
  border-bottom:1px solid rgba(182,148,108,.14);
  vertical-align:top;
}
.type-table th{
  color:var(--brand-stone);
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  background:rgba(228,217,200,.52);
}
.type-table td{
  color:var(--brand-ink);
  font-size:.9rem;
  line-height:1.75;
}
.type-table .dual-ar{
  display:block;
  font-weight:700;
  margin-bottom:.14rem;
}
.type-table .dual-en{
  display:block;
  color:rgba(29,23,18,.54);
  font-size:.72rem;
}

.icon-card{
  padding:1.2rem;
  background:rgba(247,241,231,.72);
  text-align:center;
}
.icon-card i{margin:0 auto .7rem;color:var(--brand-walnut)}
.icon-ar{
  display:block;
  color:var(--brand-walnut);
  font-size:.95rem;
}
.icon-en{
  display:block;
  color:var(--brand-stone);
  font-size:.62rem;
  letter-spacing:.1em;
  margin-top:.18rem;
}

.motif-board{
  padding:1.3rem;
  border-radius:var(--radius-sm);
  border:1px solid rgba(182,148,108,.16);
  background:rgba(247,241,231,.72);
}
.motif-svg text{fill:var(--brand-stone)}

.layout-list,
.rule-list,
.plain-list{
  list-style:none;
  display:grid;
  gap:.45rem;
}
.layout-list li,
.rule-list li,
.plain-list li{
  font-size:.88rem;
  line-height:1.8;
}
.section-dark .layout-list li,
.section-dark .rule-list li,
.section-dark .plain-list li{
  color:rgba(228,217,200,.72);
}

.photo-columns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.4rem;
}
.photo-rule{
  padding:1.35rem;
  border-radius:var(--radius-sm);
  border:1px solid rgba(182,148,108,.16);
  background:rgba(247,241,231,.06);
}
.photo-rule h3{
  color:var(--brand-sand);
  font-size:1.02rem;
  margin-bottom:.65rem;
}
.photo-rule li{
  color:rgba(228,217,200,.72);
}

.app-card{
  background:rgba(247,241,231,.06);
}
.app-card-wide{grid-column:1 / -1}
.app-kicker{
  padding:.8rem 1rem;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid rgba(182,148,108,.16);
  color:rgba(228,217,200,.84);
  font-size:.92rem;
}
.app-kicker small{
  display:block;
  color:rgba(182,148,108,.76);
  font-size:.64rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-top:.18rem;
}
.app-media{
  padding:1rem;
}
.app-note{
  padding:0 1rem 1rem;
  color:rgba(228,217,200,.7);
  font-size:.82rem;
  line-height:1.72;
}
.concept-preview{
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:1.2rem;
  border-radius:14px;
  background:linear-gradient(140deg,rgba(247,241,231,.12),rgba(36,22,14,.22));
}
.concept-preview.story{min-height:320px}
.concept-preview.profile{
  align-items:center;
  justify-content:center;
  min-height:200px;
}
.concept-preview .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:88px;
  height:88px;
  border-radius:50%;
  border:1px solid rgba(228,217,200,.28);
  background:rgba(247,241,231,.06);
}
.concept-preview .badge img{width:56px}
.concept-preview .brandmark{width:84px}
.concept-caption strong{
  display:block;
  color:var(--brand-sand);
  font-size:.9rem;
  margin-top:.9rem;
}
.concept-caption span{
  display:block;
  color:rgba(228,217,200,.66);
  font-size:.78rem;
  line-height:1.65;
  margin-top:.25rem;
}

.closing{
  position:relative;
  min-height:86vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.closing-inner{
  width:min(100%,900px);
  margin:0 auto;
  text-align:center;
}
.closing-logo{
  width:180px;
  margin:0 auto 1.8rem;
}
.dot-row{
  display:flex;
  justify-content:center;
  gap:.55rem;
  margin-bottom:1.4rem;
}
.dot{
  width:14px;
  height:14px;
  border-radius:50%;
}
.closing-ref{
  color:var(--brand-stone);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.closing-quote-ar{
  margin-top:1.2rem;
  color:var(--brand-sand);
  font-size:clamp(1.2rem,2.5vw,1.7rem);
  line-height:1.85;
}
.closing-quote-en{
  margin-top:.4rem;
  color:rgba(228,217,200,.76);
  font-size:1rem;
  line-height:1.8;
}
.download-row{
  margin-top:1.7rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.8rem;
}
.download-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:.85rem 1.25rem;
  border:1px solid rgba(182,148,108,.28);
  background:rgba(247,241,231,.06);
  color:var(--brand-sand);
  text-decoration:none;
  transition:background .25s,border-color .25s;
}
.download-link:hover{
  background:rgba(247,241,231,.12);
  border-color:rgba(228,217,200,.48);
}
.footer-line{
  display:block;
  color:rgba(182,148,108,.64);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:1rem;
}
.designer-card{
  margin:1.8rem auto 0;
  width:min(100%,560px);
  display:grid;
  grid-template-columns:86px 1fr;
  gap:1rem;
  align-items:center;
  text-align:left;
  direction:ltr;
  padding:1rem 1.1rem;
  border-radius:var(--radius-sm);
  border:1px solid rgba(182,148,108,.18);
  background:rgba(247,241,231,.05);
}
.designer-card img{
  width:86px;
  height:86px;
  border-radius:18px;
}
.designer-kicker{
  color:rgba(182,148,108,.56);
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.designer-name{
  color:var(--brand-sand);
  font-size:1.12rem;
  margin-top:.18rem;
}
.designer-line{
  color:rgba(228,217,200,.74);
  font-size:.82rem;
  line-height:1.7;
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s ease,transform .65s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:1100px){
  .logo-variants,
  .rule-grid,
  .misuse-grid,
  .summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .swatch-grid,
  .application-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .icon-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media(max-width:860px){
  .site-nav{
    padding:1rem 1.2rem;
  }
  .nav-links{
    display:none;
  }
  .section,
  .hero{
    padding-right:1.2rem;
    padding-left:1.2rem;
  }
  .grid-2,
  .grid-3,
  .type-samples,
  .clearspace-grid,
  .photo-columns{
    grid-template-columns:1fr;
  }
  .swatch-grid,
  .application-grid,
  .logo-variants,
  .rule-grid,
  .misuse-grid,
  .icon-grid,
  .summary-grid{
    grid-template-columns:1fr;
  }
  .pair-grid{
    grid-template-columns:1fr;
  }
  .clearspace-diagram{
    --gap:42px;
    min-height:300px;
  }
  .designer-card{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
}

@media(max-width:560px){
  .site-nav{
    height:auto;
    min-height:64px;
  }
  .main{
    padding-top:86px;
  }
  .section-top{
    flex-direction:column;
  }
  .footer-line{
    letter-spacing:.08em;
  }
}