/* ============================================================
   Ondřej Suchý — Design Tokens
   ============================================================ */

:root {
  --color-orange:        #ff870c;
  --color-red:           #e6170d;
  --color-navy:          #224278;
  --color-navy-link:     #374268;
  --color-navy-intro:    #1c355e;

  --color-page-bg:       #d8ecf4;
  --color-author-bg:     #cbe5f3;
  --color-blockquote-bg: #ecf5f9;
  --color-comments-bg:   #f5f5f5;
  --color-white:         #ffffff;

  --color-text:          #000000;
  --color-text-muted:    #666666;
  --color-text-mid:      #777777;
  --color-text-meta:     #999999;
  --color-text-input:    #444444;
  --color-text-quiet:    #9a9595;
  --color-text-author:   rgba(0, 0, 0, 0.7);

  --color-border-input:  #cccccc;
  --color-border-divider:#dddddd;

  --fg-1:           var(--color-text);
  --fg-2:           var(--color-text-muted);
  --fg-3:           var(--color-text-meta);
  --fg-reverse:     var(--color-white);
  --fg-link:        var(--color-navy-link);
  --fg-link-hover:  var(--color-orange);
  --fg-heading:     var(--color-navy);

  --bg-page:        var(--color-page-bg);
  --bg-surface:     var(--color-white);
  --bg-accent-strategy:   var(--color-orange);
  --bg-accent-leadership: var(--color-red);
  --bg-accent-projects:   var(--color-navy);
  --bg-accent-author:     var(--color-author-bg);
  --bg-accent-quote:      var(--color-blockquote-bg);

  --button-bg:           var(--color-navy);
  --button-bg-hover:     var(--color-orange);
  --button-fg:           var(--color-white);

  --font-family-sans: 'Jost', 'futura-pt', helvetica, arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;

  --line-height-tight:   1.1;
  --line-height-heading: 1.2;
  --line-height-body:    1.4;
  --letter-spacing-uppercase: 1px;

  --font-size-hero-h1:      73px;
  --font-size-hero-h2:      38px;
  --font-size-hero-lede:    30px;
  --font-size-section-h2:   21.28px;
  --font-size-body:         16px;
  --font-size-meta:         15px;
  --font-size-small:        13px;

  --text-shadow-hero: 0 2px 4px rgba(0, 0, 0, 0.25);

  --space-block-gap:    10px;
  --space-block-inset:  20px;
  --column-width:       580px;
  --column-padding-x:   5%;

  --radius-none: 0;
  --shadow-none: none;
  --border-input: 1px solid var(--color-border-input);
  --border-divider: 1px solid var(--color-border-divider);
}

/* ============================================================
   Reset
   ============================================================ */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
html,body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,fieldset,table{margin:0;padding:0;border:0}
*{box-sizing:border-box}

/* ============================================================
   Base
   ============================================================ */
html,button,input,select,textarea{
    font-family:'Jost','futura-pt',helvetica,arial,sans-serif;
    color:#000;
}
html{
    font-size:100%;
    -webkit-text-size-adjust:100%;
    background:#d8ecf4 url('bg-wide.png') 50% 0 repeat-y;
}
body{
    font-size:87.5%;
    font-weight:400;
    line-height:1.4;
    background:url('bg.png') 50% 0 repeat-y;
}
a{text-decoration:underline;color:#374268}
a:hover,a:focus{color:#ff870c}
h1,h2,h3,h4,h5,h6,strong,b{font-weight:500}
h1{line-height:1.1}
h2,h3{line-height:1.2}
img{max-width:100%;width:auto;height:auto;border:0;vertical-align:middle}
nav ul,nav ol{list-style:none;list-style-image:none}
small{font-size:90%;color:#777}

/* ============================================================
   Layout helpers
   ============================================================ */
.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
.cleaner{clear:both}
.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
.horizontal{padding:0 5%}

/* ============================================================
   Page main
   ============================================================ */
.page-main{padding:20px 0 0}
.page-main .horizontal{position:relative}

/* ============================================================
   Background hero
   ============================================================ */
.background{
    position:relative;
    padding-bottom:40px;
    background:url('OS.png') 50% 35px no-repeat;
    background-attachment:fixed;
    background-size:90% auto;
}

/* Hero text block */
.ondra{padding:62% 0 0;color:#fff}
.intro{text-align:center;margin-bottom:30px}
.intro h1{
    margin:0 -10px .2em;
    text-transform:uppercase;
    font-size:257%;
    letter-spacing:1px;
    text-shadow:rgba(0,0,0,.55) 0 2px 8px, rgba(0,0,0,.25) 0 4px 20px;
}
.intro h1 a{color:#fff;text-decoration:none}
.intro h2{
    margin:0 0 .45em;
    padding:.2em 0 .15em;
    text-transform:uppercase;
    font-weight:400;
    font-size:110%;
    letter-spacing:1px;
    color:#1c355e;
    background:#fff;
}
.intro p{
    margin:0 -10px .5em;
    font-size:105%;
    text-shadow:rgba(0,0,0,.25) 0 2px 4px;
}

/* Compact header (sub-pages) */
.ondra-compact{padding-top:0}
.ondra-compact h2,.ondra-compact p{display:none}

/* Subpage background – shorter hero than homepage */
.background--subpage{background-image:url('../OS.png')}
.background--subpage .ondra{padding-top:45%}
@media only screen and (min-width:600px){
    .background--subpage{background-position:50% 68px;background-size:580px auto}
    .background--subpage .ondra{padding-top:260px}
}

/* ============================================================
   Feature blocks
   ============================================================ */
.feature{
    margin:0 0 30px;
    padding:2.75% 5% 3%;
    color:#fff;
}
.feature.risk{background-color:#ff870c}
.feature.efficience{background-color:#e6170d}
.feature.projects{background-color:#224278}
.feature h2{font-size:133%;margin:0 0 .2em}
.feature p{margin:0 0 .5em}
.feature p:last-child{margin-bottom:0}
.feature a{color:#fff}
.feature h2 a{text-decoration:none}
.feature h2 a:hover,.feature h2 a:focus{text-decoration:underline}
.feature--link{display:block;text-decoration:none;cursor:pointer;color:#fff;transition:box-shadow .15s ease,transform .15s ease}
.feature--link p{display:none}
.feature--link h2,.feature--link p,.feature--link strong{color:#fff}
.feature--link h2{text-decoration:underline}
.feature--link:hover,.feature--link:focus{box-shadow:0 6px 18px rgba(0,0,0,.35);transform:translateY(-2px)}
.feature--link:hover h2,.feature--link:focus h2{text-decoration:underline}
.feature ul{padding-left:20px;margin:.35em 0 0}
.feature ul li{margin-bottom:.4em}
.feature ul li:last-child{margin-bottom:0}

/* Section block (generic white content block) */
.section-block{
    padding:4% 5%;
    background:#fff;
    color:#000;
    margin:20px 0 0;
}
.section-block h2{margin:1.2em 0 .65em;font-size:133%;color:#374268}
.section-block h2:first-child{margin-top:0}
.section-block h3{font-size:110%;margin:1.4em 0 .3em;color:#224278}
.section-block h3:first-child{margin-top:0}
.section-block p{margin:0 0 .75em}
.section-block p:last-child{margin-bottom:0}
.section-block .section-cta-link{font-size:120%;font-weight:500;color:var(--color-orange)}
.section-block .section-cta-link:hover,.section-block .section-cta-link:focus{color:var(--color-navy)}
.section-block blockquote{background:#ecf5f9;margin:0 0 .9em;color:#182e54;padding:20px}
.section-block blockquote .author{margin-bottom:0;text-align:right}

/* ============================================================
   Posts / workshops panels
   ============================================================ */
.posts{margin:0 0 20px}
.posts .posts-all{float:right;margin:8px 0 0;font-size:13px}
.posts .inner{padding:4% 5%;background:#fff}
.posts h2{
    text-transform:uppercase;
    margin:0 0 .5em;
    font-size:133%;
    color:#374268;
}
.posts ul{list-style:none;padding-left:0;margin:0;line-height:1.2}
.posts ul li{margin:0 0 .6em}
.posts ul li:last-child{margin-bottom:0}
.posts .more{margin:.8em 0 0;font-size:90%}
.posts .more a{text-transform:uppercase;font-weight:500;color:#9a9595}
.posts .more a:hover,.posts .more a:focus{color:#ff870c}
.rss{margin:1em 0 0}
.rss a{font-weight:500;font-size:15px}

/* Workshops sub-styling */
.workshops .inner{padding-bottom:3%}
.workshops ul li{margin:1.25em 0 0}
.workshops ul li:first-child{margin-top:0}
.workshops h2{color:#ff870c}
.workshops h3{margin:0 0 .5em;font-size:100%}
.workshops p{margin:0 0 .6em}
.workshops .perex{margin-top:-.35em;color:#666}
.workshops a{color:#ff870c}
.workshops a:hover,.workshops a:focus{color:#224278}

/* ============================================================
   Posts page (blog list)
   ============================================================ */
.posts-page{margin:20px 0 40px}
.posts-page h2{margin-bottom:.75em;color:#224278;text-transform:uppercase;font-size:133%}
.posts-page .posts-list{list-style:none;padding:0}
.posts-page .posts-list li{margin-bottom:1.5em}
.posts-page .posts-list h3,.posts-page .posts-list p{margin:0 0 .5em}
.posts-page .posts-list h3 a{color:#374268;text-decoration:none}
.posts-page .posts-list h3 a:hover{color:#ff870c;text-decoration:underline}
.posts-page .posts-list .meta{color:#999;font-size:90%}
.posts-page .posts-list .meta a{color:inherit}
.posts-page .posts-list .meta a:hover{color:#ff870c}
.posts-page .posts-list .perex p{margin:0;color:#555}
.posts-page .rss{margin:1.5em 0 1em}
.back{margin:0;padding:1.2em 0 .4em}
.back,.paging{text-align:center}
.paging{margin:1.5em 0}
.paging span{margin:0 .25em}

/* ============================================================
   Newsletter section
   ============================================================ */
.section{margin:0 0 10px;padding:4% 5%;background:#fff}
.section h2{margin:0 0 .25em;color:#224278}
.mailchimp-form label{display:block;margin:0 0 .25em;color:#444}
.mailchimp-form .email{display:inline-block;vertical-align:top;width:60%;padding:.375em 10px;border:1px solid #ccc}
.mailchimp-form .button{
    -webkit-appearance:none;appearance:none;border:0;
    padding:.5em 1em;background:#224278;
    text-transform:uppercase;font-weight:500;color:#fff;
    cursor:pointer;vertical-align:top;
}
.mailchimp-form .button:hover{background-color:#ff870c}

/* ============================================================
   Author info block
   ============================================================ */
.authorinfo{margin:0 0 10px;padding:4% 5% 2.5%;color:rgba(0,0,0,.7);background:#cbe5f3}
.authorinfo h2{margin:0 0 .35em}
.authorinfo p{margin:0 0 .5em}

/* ============================================================
   Page title block (sub-pages without portrait hero)
   ============================================================ */
.page-title-block{padding:4% 5% 3%;background:#fff;margin:0 0 0}
.page-title-block h1{
    font-size:133%;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#224278;
    margin:.2em 0 .4em;
    line-height:1.2;
}
.page-title-back{margin:0 0 .15em;font-size:90%}
.page-title-back a{color:#999;text-decoration:none}
.page-title-back a:hover{color:#ff870c}
.page-title-sub{margin:0;font-size:90%;color:#666}
.page-title-sub a{color:#374268}
@media only screen and (min-width:600px){
    .page-title-block{padding-left:20px;padding-right:20px}
}

/* ============================================================
   Headline block (subpage hero text)
   ============================================================ */
.headline{
    padding:4% 5% 3%;
    background:#fff;
    margin:0 0 0;
    border-left:5px solid var(--color-orange);
}
.headline--red{border-left-color:var(--color-red)}

/* Dash lists */
.dash-list,
.section-block ul{list-style:none;padding-left:0;margin:.5em 0 .75em}
.dash-list li,
.section-block ul li{padding-left:1em;text-indent:-1em;margin-bottom:.5em}
.dash-list li::before,
.section-block ul li::before{content:"– ";}
.headline p{
    margin:0 0 .6em;
    font-size:112%;
    line-height:1.5;
    color:#000;
}
.headline p:last-child{margin-bottom:0}
@media only screen and (min-width:600px){
    .headline{padding-left:20px;padding-right:20px}
}

/* ============================================================
   CTA block (call to action)
   ============================================================ */
@keyframes cta-glow{
    0%   {outline-color:rgba(255,255,255,0)}
    20%  {outline-color:rgba(255,255,255,1)}
    40%  {outline-color:rgba(255,255,255,0)}
    60%  {outline-color:rgba(255,255,255,1)}
    100% {outline-color:rgba(255,255,255,0)}
}
.cta{
    margin:20px 0 10px;
    padding:4% 5% 3%;
    background:var(--color-orange);
    color:#fff;
    outline:2px solid rgba(255,255,255,0);
}
.cta:target{animation:cta-glow 2.5s ease-in-out 1}
.cta h2{font-size:133%;margin:0 0 .35em;color:#fff}
.cta p{margin:0 0 .6em}
.cta p:last-child{margin-bottom:0}
.cta a{color:#fff;font-weight:500}
.cta a:hover,.cta a:focus{text-decoration:underline;color:#fff}
.cta .cta-actions{margin-top:.75em}
.cta .cta-secondary{margin-top:1em;padding-top:1em;border-top:1px solid rgba(255,255,255,.35)}
@media only screen and (min-width:600px){
    .cta{padding-left:20px;padding-right:20px}
}

.blogpost .back{padding-left:5%;padding-right:5%;margin:0 -5%;background:#fff}

/* ============================================================
   Comments
   ============================================================ */
.comments{background:#f5f5f5;padding:20px 5%;margin:0 -5%}
.comments h3{margin-bottom:15px;color:#374268}
.comments-list{list-style:none;padding-left:0;margin:0;color:#444}
.comment{margin:0 -5% 1em;padding:0 5%;border-bottom:2px solid #fff;overflow:hidden}
.comment .commenter{font-weight:500}
.comment .date{font-size:90%;color:#999}
.comment .body{clear:left}
.comment-form legend{display:block;margin:0 0 .75em;color:#374268;font-weight:500}
.comment-form .group{margin-bottom:.5em}
.comment-form label{display:block;margin:0 0 .2em;color:#444}
.comment-form .control{display:block;width:100%;padding:.25em;border:1px solid #ccc}
.comment-form textarea.control{resize:vertical}
.comment-form .hint{display:block;padding-top:.2em;font-size:13px;color:#999}
.comment-form .submit{text-align:right;margin-top:.5em}
.comment-form .button{
    -webkit-appearance:none;appearance:none;border:0;
    padding:.5em 1em;background:#224278;
    text-transform:uppercase;font-weight:500;color:#fff;cursor:pointer;
}
.comment-form .button:hover{background-color:#ff870c}

/* ============================================================
   Footer
   ============================================================ */
.page-footer{
    padding:5% 0 3%;
    background:#224278;
    text-align:center;
    color:#fff;
}
.page-footer a{color:#fff;text-decoration:none}
.page-footer a:hover,.page-footer a:focus{text-decoration:underline}
.footer-links{list-style:none;padding-left:0;margin:0 0 15px;font-size:0}
.footer-links li{display:inline-block;margin:0 12.5px}
.footer-contact{list-style:none;padding-left:0;margin:0 0 30px}
.footer-contact li,.footer-contact a,.footer-contact span{display:inline-block}
.footer-contact a,.footer-contact span{position:relative;margin:10px 20px 0 0;padding:5px 0 0;color:#fff;text-decoration:none}
.footer-colophon{margin:0;font-size:90%}

/* ============================================================
   Responsive ≥ 600px
   ============================================================ */
@media only screen and (min-width:600px){
    body{min-width:600px;font-size:100%}
    .horizontal{width:580px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
    .page-main{padding-top:37px}
    .background{
        padding-bottom:80px;
        background-position:50% 68px;
        background-size:580px auto;
    }
    .ondra{padding-top:62%}
    .intro h1{margin-bottom:6px;font-size:73px}
    .intro h2{margin-bottom:12px;padding-top:3px;padding-bottom:3px;font-size:38px}
    .intro p{font-size:30px}
    .feature{padding-left:20px;padding-right:20px}
    .feature h2{margin-bottom:8px}
    .feature--link p{display:block}
    .posts .inner{padding-left:20px;padding-right:20px}
    .posts h2{margin-bottom:15px}
    .posts .more{margin-top:20px}
    .section-block{padding-left:20px;padding-right:20px}
    .section{padding-left:20px;padding-right:20px}
    .authorinfo{padding-left:20px;padding-right:20px}
    .page-footer{padding-top:30px;padding-bottom:20px}
    .footer-links{float:right;margin-bottom:40px}
    .footer-contact{float:none;margin-bottom:15px;padding-top:5px}
    .footer-colophon{clear:both}
}