/* Overall page style */
:root {
    --base-temp: 110;
    --accent: 84;
    --chroma: 56; /* = 80 - (30 * 0.8) -- 30% cloud coverage assumed */
}

@font-face {
   font-family: 'Martina Plantijn';
   src: url('/res/martina-plantijn-regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
}

@font-face {
   font-family: 'Martina Plantijn';
   src: url('/res/martina-plantijn-italic.woff2') format('woff2');
   font-weight: 400;
   font-style: italic;
}

@font-face {
   font-family: 'Martina Plantijn';
   src: url('/res/martina-plantijn-light.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
}

@font-face {
    font-family: 'Martina Plantijn';
    src: url('/res/martina-plantijn-light-italic.woff2') format('woff2');
   font-weight: 300;
   font-style: italic;
}

@font-face {
   font-family: 'Martina Plantijn';
   src: url('/res/martina-plantijn-bold.woff2') format('woff2');
   font-weight: bold;
   font-style: normal;
}

@font-face {
   font-family: 'Martina Plantijn';
   src: url('/res/martina-plantijn-bold-italic.woff2') format('woff2');
   font-weight: bold;
   font-style: italic;
} 

@font-face {
   font-family: 'Fabiol';
   src: url('/res/fabiol-pro-regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'Fabiol';
   src: url('/res/fabiol-pro-italic.woff2') format('woff2');
   font-weight: normal;
   font-style: italic;
}

@font-face {
   font-family: 'Fabiol';
   src: url('/res/fabiol-pro-bold.woff2') format('woff2');
   font-weight: bold;
   font-style: normal;
}

html {
    font-size: clamp(18px, 1.6vw, 20px);
}

body {
    font-family: "Martina Plantijn", serif;
    color: lch(2% var(--chroma) var(--base-temp)); /* c was 20 */
    background: linear-gradient(
       to bottom,
       white 0%,
       white calc(100% - 8rem),
       lch(98% calc(1 + (var(--chroma) - 33) * 3 / 47) var(--base-temp)) 100%); 
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
 
    /* Make footer stick to bottom of viewport */
    display: flex;
    flex-direction: column;
    min-height: 97vh;
}

@media(min-width: 600px) {
    body {
        font-weight: 400;
    }
}

b {
    font-weight: bold;
}

i {
    font-weight: 400;
}

main {
    /* background-color: hsl(var(--base-temp),40%,99%); */
    max-width: 31rem;
    margin: 1rem auto 1rem auto;
    padding: 0 clamp(1rem, 7dvw, 56px);
    /* box-shadow: 2px 2px 10px hsl(var(--base-temp),25%,75%); */
}

body.minimal main {
    box-shadow: none;
    background: none;
}

main > header {
    display: inline-block;
    text-align: left;
    color: #999;
    padding-left: 0;
    font-family: 'Fabiol'; 
    font-size: 1.1rem;
}

main > header h1 {
    color: #888;
    font-size: 1.2em;
    font-weight: normal;
    margin:0;
    padding:0 0.1em 0 0;
    /* Typing + Blinkin Cursor */
    display: inline-block;
    line-height: 0.9rem;
    overflow: hidden;
    white-space: nowrap;
    border-right-width: 0.4rem;
    border-right-style: solid;
    border-right-color: transparent;
    animation:
      typing 1.5s steps(20, end),
      blink-cursor .5s step-end 10;
}

@keyframes typing {
from { width: 0.5em; }
to { width: 100% }
}

@keyframes blink-cursor {
from, to { border-color: transparent }
50% { border-color: lch(45% 50 var(--base-temp)); }
}

a {
    color: lch(45% calc(var(--chroma) * 0.8) var(--base-temp)); /* c was 90 */
    text-decoration: none;
    padding: 2px 0;
    font-weight: normal;
    -webkit-font-smoothing: auto;
    transition: background-color 0.2s ease;
}

a:hover {
    background-color: lch(96% calc(var(--chroma) / 25) var(--base-temp)); /* c was 12 */ 
    border-radius: 2px;
}

main>header a {
    font-style: normal;
    color: inherit;
}

main>header a:hover {
    color: hsl(var(--accent), 85%, 20%);
    background: none;
}

.center {
    text-align: center;
}

article h1 {
    font-weight: bold; 
    font-size: 1.33rem;
    line-height: 1.1;
    color: lch(40% 30 var(--base-temp));
    margin: 0 0 1.6rem;
    text-wrap: balance;
}

h1 + p, h2 + p, .margin + p, p:first-child, aside.inline-note:first-child {
    margin-top: 0;
}

article h2 {
    font-size: 1.4rem;
    font-family: Fabiol;
    font-feature-settings: "smcp" 1;
    font-weight: normal;
    -webkit-font-smoothing: auto;
    text-transform: lowercase;
    line-height: 1;
    margin: 2.75rem 0 0.25rem 0;
    color: lch(40% 30 var(--base-temp)); /* hsl(var(--base-temp), 20%, 40%); */
}

article h2:first-child, aside.margin:first-child + h2 {
    margin-top: 0;
}

article {
    padding-top: 2rem;
    font-variant-numeric: oldstyle-nums;
    margin-bottom: 2rem;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    font-variation-settings: 'wdth' 95; 
}

article a[href^="http"]:not([href*="joeldueck.com"]):before {
    content: '·';
    color: lch(60% 50 var(--accent)); /* hsl(var(--accent),30%,60%); */
    margin-right: 0.04rem;
}

article a[href^="http"]:not([href*="joeldueck.com"]):after {
    content: '·';
    color: lch(60% 50 var(--accent));
    margin-left: 0.04rem;
}

article hr, hr.pause {
    visibility: hidden;
    margin: 3rem 0 2.25rem 0;
}

article hr::before, hr.pause::before {
    content: '\e000\e002';
    visibility: visible;
    display: block;
    width: 2rem;
    margin: 0 auto;
    font-family: 'Fabiol';
    font-size: 1.1rem;
    color: lch(60% 30 var(--accent));  /* hsl(var(--base-temp), 65%, 30%); */
}

blockquote {
    font-size: 0.94rem;
    line-height: 1.35rem;
}

blockquote footer {
    text-align: right;
}

@media(min-width: 1000px) {
    body.minimal main > header {
        padding-left: 0;
    }

    h1 + blockquote {
        margin-top: 0;
    }

    article {
        padding-top: 4rem;
    }

    article.simple {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

.fabiol {
    font-family: Fabiol, serif;
}

.small-caps, .hashtag, dl.pagelist dt {
    font-style: normal;
    font-feature-settings: "smcp" 1;
    text-transform: lowercase;
}

ol {
    list-style-type: none;
    counter-reset: numlist;
    padding-left: 1rem;
}

ol li::before {
    counter-increment: numlist;
    content: counter(numlist);
    font-weight: bold;
    float: left;
    margin-left: -1.9em;
    text-align: right;
    color: lch(50% 40 var(--accent)); /* hsl(var(--accent), 40%, 50%); */
    min-width: 1.5em;
}

ul {
    padding-left: 1.3rem;
    list-style-type: none;
}

article ul li::before {
    font-feature-settings: "aalt" on;
    content: "\2022";
    color: lch(32% 40 var(--accent));  /* hsl(var(--accent), 40%, 50%); */
    float: left;
    margin-left: -1em;
}

article p, article li {
    margin-bottom: 1rem;
    hyphens: auto;
    /* text-wrap: pretty; - actually looks worse in supporting browsers as of Aug 2025 */
}

aside p:last-child, figcaption p:last-child {
    margin-bottom: 0;
}

note-card {
    display: block;
    border-top: solid 1px lch(60 calc(var(--chroma) * 0.5) var(--base-temp));
    border-bottom: solid 1px lch(60 calc(var(--chroma) * 0.5) var(--base-temp));
    padding: 10px;
    border-radius: 13px;
    font-size: .95em;
    background: lch(from lch(50 var(--chroma) var(--base-temp)) 20% c h / .05);
    box-shadow: 2px 3px 1px lch(90 10 var(--base-temp));
    margin-bottom: 2rem;
}

.card-title {
    display: block;
    text-align: right;
    margin-top: -10px;
    margin-bottom: .25em;
    border-bottom: dashed 1px lch(70 20 var(--base-temp));
    font-family: Fabiol;
    font-style: italic;
}

.card-title a { color: unset; }

note-card > p:last-child {
    margin-bottom: 0;
}

note-card > p:first-of-type {
    margin-top: 0;
}

ol.tight li, ul.tight li {
    margin-bottom: 0;
}

dl.pagelist {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto 1fr;
}

dl.descriptions {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 4fr;
    border-top: solid lch(85% calc(var(--chroma) / 3) var(--base-temp)) 2px;
    border-bottom: solid lch(85% calc(var(--chroma) / 3) var(--base-temp)) 2px;
    margin-top: 4rem;
    margin-bottom: 4rem;
    padding: .5rem 0 1rem 0;
    font-weight: 400;
    row-gap: 2rem;
}

dl.descriptions > dt {
    text-wrap: balance;
}

dl.descriptions > dt a {
    font-weight: 400;
}

dl.descriptions > dt a:before, dl.descriptions > dt a:after {
    content: "";
    display: none;
}

dl.descriptions > dd {
    text-wrap: pretty;
}

dl.descriptions > dt ul {
    list-style-type: none;
    padding: 0.1rem 0;
    font-size: 0.9em;
}

dl.descriptions > dt li {
    display: inline-block;
}

dl.descriptions > dt li::before {
    content: "";
    display: none;
}

abbr {
    text-decoration: none;
}

article abbr {
    border-bottom: dotted hsl(var(--base-temp),50%,45%) 2px; 
}

/* Can't remember where this is used (Mar 2025) */
pre.sym {
    font-family: 'Fabiol'; 
    font-size:2.5rem;
    line-height:1em;
    background-image: linear-gradient(to bottom,hsl(var(--base-temp),55%,75%), hsl(var(--accent), 85%, 20%));
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

aside {
    background: lch(96% calc(var(--chroma) * 4 / 77) var(--base-temp)); /* hsl(var(--base-temp),25%,92%); */
    font-family: "Fabiol";
    font-size: 1rem;
    line-height: 1.16rem;
    border-left: solid lch(50% calc(3 + (var(--chroma) - 33) * 4 / 47) var(--base-temp)) 2px;
    border-radius: 5px;
    padding: 0.2rem;
    margin-bottom: 0.2rem;
    -webkit-font-smoothing: auto;
}

aside:before {
    content: "☞ ";
    color: lch(55% calc(23 + (var(--chroma) - 33) * 4 / 47) var(--base-temp));
    line-height: 1rem;
    font-size: 1.35rem;
    font-family: "Fabiol";
}

aside.inline-note {
    font-family: 'Martina Plantijn';
    font-size: .8em;
    font-weight: 400;
    line-height: 1.4;
    width: 80%;
    margin: 2rem auto;
    color: unset;
    padding: 0.5em;
    border-radius: 5px;
    border-left: solid 4px;
    border-color: lch(55% calc(23 + (var(--chroma) - 33) * 4 / 47) var(--base-temp));
    float: none;
    text-align: left;
}

.margin img, aside img, figure img {
    border-radius: 0.1rem;
    max-width: 7rem;
    position: inherit;
}

a.crossref {
    font-feature-settings: "smcp" 1;
    text-transform: lowercase;
}

aside a.crossref {
    font-style: normal;
    font-feature-settings: "smcp" 1;
    text-transform: lowercase;
    hyphens: none;
}

article img {
    max-width: 100%;
    height: auto;
    margin: 0;
}

figure {
    margin: 1rem 0;
}

figure + figure, p + figure {
    margin-top: 2rem;
}

figcaption {
    font-size: smaller;
    text-align: right;
    font-style: italic;
    margin-top: 0;
}

figcaption p {
    margin: 0;
}

@media(min-width: 1000px) {
    article figure {
        max-width: 130%;
        margin-left: -15%;
        margin-right: -15%;
    }
    
    article figure img {
        width: 130%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    figcaption {
        margin-top: .25rem;
    }
}

@media(min-width: 1000px) {
    .margin, aside {
        float: left;
        text-align: right;
        clear: left;
        text-wrap: balance;
    }

    aside {
        margin-left: -10rem;
        margin-top: 0.15rem;
        width: 8rem;
        hyphens: none;
        border: none;
        padding: 0;
    }

    aside.margin {
        background: none;
    }

    div.margin {
        margin-left: -10rem;
        width: 9rem;
    }
  
    aside::before {
      display: block;
      float: right;
      margin-right: -1.35rem;
    }

    aside.inline-note {
        text-wrap: unset;
    }

    aside.inline-note::before {
        display: unset;
        float: none;
        margin-right: unset;
    }

   /* article img {
        max-width: 100%;
        margin: 0;
         left: calc(-35vw + 50%);
        max-width: 100vw;
        position: relative;
        width: 70vw;
    } */

  }

article img.avatar {
    position: unset;
    width: auto;
    max-width: 5rem;
    border-radius: 50%;
    box-shadow: 8px 8px 10px #eee;
    margin-top: -2rem;
    margin-bottom: 1rem;
}

kbd {
    display: inline-block;
    font-family: system-ui, sans-serif;
    padding: 3px 5px;
    font-size: 0.7em;
    font-weight: normal;
    line-height: 1.2;
    color: rgba(0, 0, 0, 0.87);
    vertical-align: middle;
    background-color: #FAFAFA;
    border: solid 1px rgba(0, 0, 0, 0.54);
    border-bottom-color: rgba(0, 0, 0, 0.54);
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.54);
    margin: 1px;
}

body>footer {
    text-align: center;
    max-width: calc(min(100%, 43rem));
    margin: auto auto 0 auto;
    overflow: hidden;
    padding-bottom: 1.5rem;
}

@media (min-height: 106vh) {
    body>footer {
        margin-top: 4rem;
    }
}

footer nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

footer nav a {
    color: lch(35% 40 var(--base-temp));
}

footer nav ul {
    font-family: Fabiol;
    font-feature-settings: 'smcp' 1;
    font-size: clamp(18px, 4vw, 1.2rem);
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;
    position: relative;
} 

footer nav ul::before, footer nav ul::after {
    font-family: Fabiol;
    font-size: 0.6rem;
    line-height: 2.2rem;
    content: '\f003\f851\f005\f853\f003\f851\f005\f853\f003\f851\f005\f853\f003\f851\f005\f853\f003\f851\f005\f853\f003\f851\f005\f853\f003\f851\f005\f853\f003\f851\f005\f853';
    color: lch(85% calc(var(--chroma) / 3) var(--base-temp));
    flex: 1;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
}

footer nav ul li {
    /* display: inline-block; */
    margin: 0 0.4rem;
    text-transform: lowercase;
}

li.foot-nav-middle::before {
    content: '\e000\e002';
    font-family: Fabiol;
    font-size: 0.625rem;
    color: lch(65% 35 var(--base-temp));
    margin: 0 0.4rem 0 0;
}

#weather {
    font-family: Fabiol;
    font-feature-settings: "smcp", "onum" 1;
    font-weight: normal;
    text-transform: lowercase;
    margin-bottom: 0.25rem;
    margin-top: 1rem;
}


#colorplayground {
    font-family: Fabiol;
    display: grid;
    grid-template-rows: 1fr 1fr; 
    gap: 0.25em 0.25em; 
    grid-template-areas: 
      "temp reset"
      "clouds ."; 
    max-width: 10rem;
    margin: 0 auto;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
        border-radius: 3px;
    margin: 0;
}
  
.slider:hover {
    opacity: 1;
}
  
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 6px;
    height: 25px;
    border: none;
    cursor: pointer;
}
  
.slider::-moz-range-thumb {
    width: 6px;
    height: 25px;
    cursor: pointer;
}

#tempRange {
    grid-area: temp;
    background: linear-gradient(to right,
                                lch(84% 40 270),
                                lch(84% 40 255),
                                lch(84% 40 240),
                                lch(84% 40 225),
                                lch(84% 40 210),
                                lch(84% 40 195),
                                lch(84% 40 180),
                                lch(84% 40 165),
                                lch(84% 40 150),
                                lch(84% 40 135),
                                lch(84% 40 120),
                                lch(84% 40 105),
                                lch(84% 40 90),
                                lch(84% 40 75),
                                lch(84% 40 60),
                                lch(85% 40 45));
}

#cloudRange {
    grid-area: clouds;
    background: linear-gradient(to right,
                                lch(84% 80 210) 0% 20%,
                                lch(84% 70 210) 20% 40%,
                                lch(84% 50 210) 40% 60%,
                                lch(84% 25 210) 60% 80%,
                                lch(84% 10 210) 80% 100%);
}

#tempRange::-webkit-slider-thumb {
    background: lch(45% 85 var(--base-temp));
}

#tempRange::-moz-range-thumb {
    background: lch(45% 85 var(--base-temp));
}

#cloudRange::-webkit-slider-thumb {
    background: lch(45% 85 210);
}

#cloudRange::-moz-range-thumb {
    background: lch(45% 85 210);
}

div.form-holder {
    text-align: center;
}

form.smallbox {
    text-align: left;
    display: inline-block;
    padding: 0.5rem;
    background: white;
    border: solid 1px silver;
    border-radius: 3px;
    box-shadow: 10px 10px 10px #eee;
}

button#reset-weather {
    margin-left: 0.5rem;
    grid-area: reset;
}

#accept-policy-hp { display: none; }

button, input[type="submit"] {
    appearance: none;
    background-color: #FAFBFC;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    box-sizing: border-box;
    color: #666;
    cursor: pointer;
    display: inline-block;
    line-height: 20px;
    font-family: inherit;
    font-size: 20px;
    height: 26px;
    list-style: none;
    padding: 2px 14px;
    position: relative;
    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: top;
    white-space: nowrap;
    word-wrap: break-word;
}

button:hover, input[type="submit"]:hover {
    background-color: #F3F4F6;
    text-decoration: none;
    transition-duration: 0.1s;
}

button:disabled {
    background-color: #FAFBFC;
    border-color: rgba(27, 31, 35, 0.15);
    color: #959DA5;
    cursor: default;
}

button:active {
    background-color: #EDEFF2;
    box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
    transition: none 0s;
}

button:focus {
    outline: 1px transparent;
}

button:before {
    display: none;
}

button:-webkit-details-marker {
    display: none;
}

input[type="email"], input[type="text"] {
    font-family: Fabiol, serif;
    font-size: 1rem;
    border: solid silver 1px;
}

.row-form input[type="email"], .row-form input[type="text"] {
    margin-bottom: 1rem;
}