/* Ed: Skills Unlocked — jpcardinal.com
   Palette and type taken from the book covers so the site and the shelf match. */

@font-face{font-family:Oswald;src:url(fonts/oswald-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Oswald;src:url(fonts/oswald-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Oswald;src:url(fonts/oswald-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito-400i.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --navy:#18334F;        /* cover title colour */
  --board:#8D2319;       /* Ed's shirt, used for the sign frame */
  --parchment:#F3E3C2;   /* the cover sign */
  --paper:#FAF4E6;       /* page ground */
  --slate:#4A5568;       /* secondary text */
  --rule:#D9C9A6;
  --focus:#B4531F;
  --measure:64ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--navy);
  font-family:Nunito,system-ui,sans-serif;font-size:1.0625rem;line-height:1.65;
}
img{max-width:100%;height:auto;display:block}

h1,h2,h3,.nav a,.btn,.strip-title{font-family:Oswald,system-ui,sans-serif;font-weight:700;letter-spacing:.01em;line-height:1.1}
h1{font-size:clamp(2.1rem,6vw,3.4rem);margin:0 0 .4em}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:2.4rem 0 .6em}
h3{font-size:1.25rem;margin:1.6rem 0 .4em;font-weight:500}
p,li{max-width:var(--measure)}
a{color:var(--board);text-underline-offset:.16em}
a:hover{color:var(--focus)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;position:fixed;background:var(--navy);color:var(--paper);padding:.6rem 1rem;z-index:20}

.wrap{width:min(100% - 2.5rem,68rem);margin-inline:auto}

/* ---- masthead ---------------------------------------------------- */
.masthead{border-bottom:2px solid var(--rule);background:var(--paper)}
.masthead .wrap{display:flex;flex-wrap:wrap;align-items:center;padding:1rem 0}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--navy);margin:.4rem 1.5rem .4rem 0}
.brand img{margin-right:.7rem}
.brand img{width:42px;height:42px}
.brand-name{display:block}
.brand b{font-family:Oswald;font-weight:700;font-size:1.15rem;letter-spacing:.02em}
.brand-tag{display:block;font-size:.78rem;color:var(--slate);font-weight:400;letter-spacing:0}
.nav{margin-left:auto;display:flex;flex-wrap:wrap}
.nav a{color:var(--navy);text-decoration:none;font-weight:500;font-size:1.02rem;padding-bottom:2px;margin:.35rem 0 .35rem 1.5rem;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--board)}
.nav a[aria-current=page]{border-bottom-color:var(--board);color:var(--board)}

/* ---- the sign: the cover's motif, used once per page -------------- */
.sign{background:var(--board);padding:.85rem;border-radius:3px;transform:rotate(-1.5deg);
      box-shadow:0 10px 26px rgba(24,51,79,.18);margin:2.6rem 0 2rem}
.sign-inner{background:var(--parchment);padding:clamp(1.4rem,4vw,2.6rem)}
.sign p{color:var(--navy);margin:0}
.sign .kicker{font-size:.98rem;margin-bottom:.9rem}
.sign h1{margin-bottom:.3rem}
.sign .sub{font-family:Oswald;font-weight:500;font-size:clamp(1.05rem,2.4vw,1.5rem);line-height:1.25}

.lede{font-size:1.18rem;max-width:100%}

/* ---- books -------------------------------------------------------- */
.book{display:grid;grid-template-columns:minmax(0,190px) 1fr;gap:1.8rem;align-items:start;
      padding:2rem 0;border-top:2px solid var(--rule)}
.book img{border:1px solid var(--rule);box-shadow:0 6px 18px rgba(24,51,79,.14)}
.book h2{margin-top:0}
.book .order{font-family:Oswald;font-weight:500;color:var(--board);font-size:1rem;margin:0 0 .2rem}

.btn{display:inline-block;background:var(--navy);color:var(--paper);text-decoration:none;
     padding:.7rem 1.3rem;border-radius:2px;font-size:1rem;border:2px solid var(--navy)}
.btn:hover{background:var(--paper);color:var(--navy)}
.btn.quiet{background:transparent;color:var(--navy)}
.btn.quiet:hover{background:var(--navy);color:var(--paper)}
.btns{margin-top:1.1rem}
.btns .btn{margin:0 .7rem .7rem 0}

/* ---- the cork board: downloads as pinned strips -------------------- */
.board{background:#C79A62;background-image:radial-gradient(rgba(120,80,40,.22) 1px,transparent 1px);
       background-size:7px 7px;padding:clamp(1.1rem,3vw,2rem);border:10px solid #6E4A28;border-radius:4px;margin:1.6rem 0}
.strip{position:relative;display:block;background:#FBF6E9;color:var(--navy);text-decoration:none;
       border:1px solid #CBB68E;padding:1.1rem 1.4rem 1.1rem 3rem;margin:0 0 1rem;
       box-shadow:0 4px 10px rgba(60,35,10,.28)}
.strip:nth-child(odd){transform:rotate(-.7deg)}
.strip:nth-child(even){transform:rotate(.5deg)}
.strip::before{content:"";position:absolute;left:1.25rem;top:50%;width:14px;height:14px;margin-top:-7px;
       border-radius:50%;background:var(--board);box-shadow:inset 0 -2px 3px rgba(0,0,0,.35)}
.strip-title{display:block;font-size:1.22rem}
.strip-meta{display:block;color:var(--slate);font-size:.95rem;margin-top:.15rem;max-width:56ch}
.strip:hover{box-shadow:0 7px 16px rgba(60,35,10,.34)}
@media(prefers-reduced-motion:no-preference){.strip{transition:box-shadow .18s ease}}

/* ---- notes / callouts --------------------------------------------- */
.note{border-left:5px solid var(--board);background:#fff;padding:1rem 1.2rem;margin:1.6rem auto;max-width:calc(var(--measure) + 2.4rem + 5px)}
.note h3{margin-top:0}
.cols{display:grid;gap:1.6rem 2.4rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:1rem}
.cols p{max-width:none}

main{padding-bottom:4rem}

/* ---- footer -------------------------------------------------------- */
footer{background:var(--navy);color:#D7E0EC;margin-top:3rem}
footer .wrap{padding:2.2rem 0;display:grid;gap:1.4rem 3rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
footer a{color:#F3E3C2}
footer h3{color:var(--parchment);font-size:1.02rem;margin:0 0 .3rem}
footer p,footer li{font-size:.95rem;max-width:40ch}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:.25rem}
.fine{border-top:1px solid rgba(243,227,194,.25);font-size:.85rem;padding:1rem 0;color:#AFC0D4}

@media(max-width:640px){
  .book{grid-template-columns:1fr}
  .book img{max-width:190px}
  .sign{transform:none}
  .strip{padding-left:2.6rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}