/* Shared stylesheet for the Kyslan library (/guides). Consoles are dark and so
   is this: it is a reading surface on the homepage's ground, not a document a
   customer prints. Every page links this instead of carrying its own <style>. */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;-webkit-font-smoothing:antialiased;background:#0E0F14;color:#A2A2AB;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
a{color:#C2A36B;text-decoration:none;}
a:hover{color:#F2F1ED;}
::selection{background:#C2A36B;color:#17150F;}
img{max-width:100%;}

.wrap{max-width:760px;margin:0 auto;padding:0 40px;}
.wrap-wide{max-width:1060px;margin:0 auto;padding:0 40px;}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;}
.kicker{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:0.26em;text-transform:uppercase;color:#C2A36B;}

h1{font-family:'Newsreader',Georgia,'Times New Roman',serif;
  font-size:clamp(32px,5vw,52px);font-weight:300;letter-spacing:-0.012em;
  line-height:1.05;margin:16px 0 14px;color:#F2F1ED;text-wrap:pretty;}
h2{font-family:'Newsreader',Georgia,'Times New Roman',serif;
  font-size:clamp(24px,3.2vw,31px);font-weight:300;letter-spacing:-0.01em;
  line-height:1.15;margin:56px 0 14px;color:#F2F1ED;text-wrap:pretty;}
h3{font-size:17px;font-weight:500;letter-spacing:-0.012em;margin:34px 0 8px;color:#F2F1ED;}
p{font-size:16.5px;line-height:1.72;margin:0 0 16px;}
li{font-size:16.5px;line-height:1.72;margin:0 0 10px;}
ul,ol{padding-left:22px;margin:0 0 18px;}
b,strong{font-weight:500;color:#F2F1ED;}
hr{border:0;border-top:1px solid #23242B;margin:56px 0;}

.byline{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;color:#63636C;margin:0 0 34px;}
.crumb{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;color:#63636C;}
.crumb a{color:#63636C;}
.crumb a:hover{color:#C2A36B;}

/* The short answer block. It sits above the fold on every article because it is
   the passage a search engine or an AI assistant lifts when it answers for us. */
.answer{border-left:2px solid #C2A36B;background:#14151B;border-radius:0 4px 4px 0;
  padding:24px 26px;margin:0 0 42px;}
.answer p:last-child{margin-bottom:0;}
.answer .lbl{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:0.2em;text-transform:uppercase;color:#C2A36B;display:block;margin-bottom:10px;}

.toc{border:1px solid #23242B;background:#14151B;border-radius:4px;padding:22px 26px;margin:0 0 48px;}
.toc span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:0.2em;text-transform:uppercase;color:#7C7C86;}
.toc ol{margin:12px 0 0;padding-left:20px;}
.toc li{font-size:15.5px;margin-bottom:7px;}
.toc a{color:#A2A2AB;}
.toc a:hover{color:#C2A36B;}

.note{border:1px solid #23242B;background:#14151B;border-radius:4px;
  padding:20px 24px;margin:28px 0;font-size:15.5px;line-height:1.68;}
.note p:last-child{margin-bottom:0;}
.note .lbl{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:0.2em;text-transform:uppercase;color:#7C7C86;display:block;margin-bottom:9px;}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0 28px;}
table{width:100%;min-width:520px;border-collapse:collapse;}
th{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:0.16em;
  text-transform:uppercase;color:#7C7C86;text-align:left;padding:11px 16px 11px 0;
  border-bottom:1px solid #2F3038;vertical-align:bottom;}
td{font-size:15.5px;line-height:1.6;color:#A2A2AB;padding:14px 16px 14px 0;
  border-bottom:1px solid #23242B;vertical-align:top;}
td b{color:#F2F1ED;}

dt{font-size:16.5px;font-weight:500;color:#F2F1ED;margin:30px 0 6px;scroll-margin-top:90px;}
dd{font-size:16.5px;line-height:1.72;margin:0;color:#A2A2AB;}

/* Question and answer pairs at the foot of an article. Written flat in the HTML
   rather than built by script, so a crawler that does not run JavaScript still
   reads them. */
.qa{border-top:1px solid #23242B;padding:24px 0 6px;}
.qa h3{margin:0 0 8px;font-size:16.5px;}
.qa p{color:#A2A2AB;}

.cta-inline{border:1px solid #2F3038;border-left:2px solid #C2A36B;background:#14151B;
  border-radius:4px;padding:18px 22px;margin:0 0 48px;font-size:15.5px;line-height:1.6;color:#A2A2AB;}
.cta-inline a{color:#C2A36B;font-weight:500;white-space:nowrap;}

.cta{border:1px solid #2F3038;background:#14151B;border-radius:4px;
  padding:34px 36px;margin:60px 0 0;}
.cta h2{margin:0 0 10px;font-size:clamp(22px,3vw,28px);}
.cta p{margin:0 0 20px;font-size:16px;}
.btn{display:inline-block;font-size:16px;font-weight:500;color:#17150F;background:#C2A36B;
  border-radius:2px;padding:14px 26px;transition:background 0.2s ease;}
.btn:hover{background:#D0B47E;color:#17150F;}
.cta .sub{font-size:13.5px;color:#7C7C86;margin:14px 0 0;}

/* Library index cards. */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:26px 0 0;}
.card{display:block;border:1px solid #23242B;background:#14151B;border-radius:4px;
  padding:26px 26px 28px;transition:border-color 0.2s ease;}
.card:hover{border-color:#C2A36B;}
.card .t{font-family:'Newsreader',Georgia,serif;font-size:22px;font-weight:300;
  line-height:1.2;color:#F2F1ED;display:block;margin:10px 0 9px;}
.card p{font-size:15px;line-height:1.62;margin:0;color:#7C7C86;}
.card .k{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:0.2em;text-transform:uppercase;color:#63636C;}

.next{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:22px 0 0;}
.next a{display:block;border:1px solid #23242B;background:#14151B;border-radius:4px;
  padding:18px 20px;font-size:15.5px;line-height:1.5;color:#F2F1ED;transition:border-color 0.2s ease;}
.next a:hover{border-color:#C2A36B;}

@media (max-width:680px){
  .wrap,.wrap-wide{padding:0 22px;}
  .answer,.toc,.cta,.card{padding-left:20px;padding-right:20px;}
  .cta{padding-top:28px;padding-bottom:28px;}
}

/* The header nav wraps to two lines on a phone, which reads as broken. Below
   this width only the logo and the call to action stay: the library index is a
   tap away in the breadcrumb and the footer. */
@media (max-width:560px){
  .hnav{display:none;}
}