.arch h1.pagetitle {
    font-size: 200%;
    margin-bottom: 1.25em;
    padding: .5em 0;
    background: linear-gradient(0deg,hsla(34deg,38%,99%,0),hsla(34deg,38%,99%,.85),hsla(34deg,38%,99%,.85),hsla(34deg,38%,99%,0)),url(prevnext-center.png)50% 50%/contain no-repeat
}

@media (min-width:30em) {
    .arch h1.pagetitle {
        font-size: 225%
    }
}

@media (min-width:40em) {
    .arch h1.pagetitle {
        font-size: 300%
    }
}

.panel {
    color: hsla(33deg,50%,10%,.75)
}

.panel h3,.panel h4,.panel h5,.panel h6 {
    font-family: IM Fell English,Georgia,serif
}

.panel h3,.panel h4 {
    font-style: italic;
    font-weight: 500;
    margin: .5em 0
}

.panel h5,.panel h6 {
    margin: 0
}

.arch #monthly {
    grid-column: main;
    grid-row: 5;
    justify-self: center;
    width: auto;
    text-align: center;
    border-top: 1px solid;
    padding: 0 1em
}

.arch #monthly ul {
    list-style-type: none
}

.arch #monthly>ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.arch #monthly>ul>li {
    width: 5em;
    margin: .25em
}

.arch #monthly ul[role=navigation]>li>h5 {
    margin: 0;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 1em;
    background: rgba(0,0,0,.025)
}

.arch #monthly ul[role=navigation]>li>h5::after,.arch #monthly ul[role=navigation]>li>h5::before {
    content: "•";
    margin: 0 .25em
}

.arch #monthly ul[role=navigation]>li>h5 a {
    text-decoration: none
}

.arch #monthly ul[role=navigation] li a {
    text-decoration-color: rgba(32,0,64,.25);
    text-underline-offset: .15em
}

.arch #monthly ul[role=navigation]>li {
    padding: 0 0 1em
}

.arch #monthly ul[role=navigation]>li>ul>li {
    padding-right: .75em
}

.arch #monthly ul[role=navigation]>li>ul a {
    display: block;
    padding-left: .5em
}

.arch .panel,.prev-next {
    font-family: 'IM Fell English',Georgia,serif
}

.arch .panel {
    padding: 1em
}

.arch .panel p {
    line-height: 1.3;
    margin: .33em 0
}

.arch .panel li,.arch .panel p, .arch .panel a {
    font-size: 87.5%
}

.arch .panel a,.recipe td[class^=x] {
    white-space: nowrap
}

.arch #main {
    grid-column: main;
    grid-row: 2/span 2
}

.arch #categories h4,.arch #related h4 {
    text-align: center
}

.arch #related ul {
    margin: 0 0 1.33em .125em;
    padding: 0 0 1em;
   
    list-style: none;
    columns: 2
}

.arch #related li {
    margin-bottom: .5em
}

.arch #related a {
    white-space: normal
}

.arch #related time {
    font-size: 90%;
    white-space: nowrap
}

.arch #related time::before {
    content: " ("
}

.arch #related time::after {
    content: ")"
}

.arch #feeds,.prev-next h4 {
    grid-column: main;
    grid-row: 4;
    text-align: center
}

.arch #categories {
    grid-column: main;
    grid-row: 5;
    border-top: 1px solid
}

.arch #categories ul {
    list-style: none
}

.arch #categories>ul {
    font-size: 1.1em;
    columns: 2
}

.arch #categories>ul ul {
    margin-left: .15em;
    margin-bottom: .5em;
    padding-left: .25em;
    border-left: 1px solid gray
}

.arch #categories>ul li {
    margin: .25em 0
}

.arch #categories .current-cat a {
    font-weight: 700
}

@media (min-width:30em) {
    .arch #categories>ul {
        columns: 3
    }
}

@media (min-width:40em) {
    .arch .panel {
        width: 90%;
        padding: 0;
        margin-bottom: 1em
    }

    .arch #monthly {
        grid-column: left;
        grid-row: 3/span 3;
        justify-self: start;
        margin-left: 25%;
        padding: 0;
        border-top: none
    }

    .arch #monthly>ul {
        flex-direction: column
    }

    .arch #related {
        grid-column: right;
        grid-row: 4;
        padding-right: 1em;
        text-align: right;
        justify-self: end;
        margin-top: 1em
    }

    .arch #categories h4,.arch #related h4 {
        text-align: inherit
    }

    .arch #categories>ul,.arch #related ul {
        columns: 1
    }

    .arch #categories,.arch #feeds {
        grid-column: right;
        text-align: right;
        margin-left: auto;
        border-top: none
    }

    .arch #feeds {
        grid-row: 3;
        padding-right: 1em
    }

    .arch #categories {
        grid-row: 4;
        align-self: start;
        margin-right: 1em
    }

    .arch #categories>ul>li {
        margin-bottom: .33em
    }

    .arch #categories>ul ul {
        margin-top: .33em;
        margin-right: .15em;
        margin-bottom: .5em;
        padding-right: .25em;
        border-right: 1px solid gray;
        border-left: none
    }
}

@media (max-width:64.999em) {
    .single>#thoughts {
        grid-column: left/right;
        padding-left: 3.125vw
    }
}

@media (min-width:65em) {
    .arch .panel {
        width: 75%;
        font-family: IM Fell English,Crimson Text,Georgia,serif
    }

    .arch #related {
        grid-column: left;
        grid-row: 3;
        text-align: left;
        margin-top: 0;
        padding-left: 1em;
        padding-right: 0;
        justify-self: start
    }
}

.prev-next {
    grid-row: -3;
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    align-items: center;
    align-self: start;
    margin-top: 5em
}

@media (min-width:50em) {
    .prev-next {
        grid-column: main
    }
}

.prev-next h4 {
    grid-row: 1;
    grid-column: 2;
    z-index: 10;
    margin: 0;
    padding: 1.5em .5em;
    font-family: inherit;
    line-height: 1;
    font-style: italic;
	text-align: center;
    background: radial-gradient(55% 55%at 50% 50%,hsla(34deg,38%,99%,.8) 75%,transparent 100%),url(/img/prevnext-center.png)center/contain no-repeat
}

.prev-next p {
	margin: 0;
}
.prev-next .prev {
	grid-row: 1;
	grid-column: 1;
	text-align: right;
	padding-right: 2em;
	margin-right: -4px;
	background:
		linear-gradient(270deg, hsla(34deg,38%,99%,0.75), hsla(34deg,38%,99%,0) 3em),
		url(/ui/i/hamonshu/prevnext-left.png) 100% 50% / 4em auto no-repeat;
}

#commentform>header h3,#thoughts #comments li[class*=back] p,#thoughts .entry,.prev-next p {
    margin: 0
}

.prev-next .prev {
    grid-row: 1;
    grid-column: 1;
    text-align: right;
    padding-right: 2em;
    margin-right: -4px;
    background: linear-gradient(270deg,hsla(34deg,38%,99%,.75),hsla(34deg,38%,99%,0) 3em),url(/ui/i/hamonshu/prevnext-left.png)100% 50%/4em auto no-repeat
}

.prev-next .next {
    grid-row: 1;
    grid-column: 3;
    padding-left: 2em;
    margin-left: -4px;
    background: linear-gradient(90deg,hsla(34deg,38%,99%,.75),hsla(34deg,38%,99%,0) 3em),url(/ui/i/hamonshu/prevnext-right.png)0 50%/4em auto no-repeat
}

.prev-next a {
    display: block;
    font-style: italic;
    font-weight: 400
}

.prev-next p a {
    padding: 2.5em
}

@media (max-width:30em) {
    .prev-next h4 {
        padding: .5em 0
    }

    .prev-next .prev {
        padding-right: 1em;
        background-size: cover,1em auto
    }

    .prev-next .next {
        padding-left: 1em;
        background-size: cover,1em auto
    }

    .prev-next p a {
        padding: 2.5em 0
    }
}



#thoughts p.note {
    text-indent: 0;
    margin: 2.5em 0 0
}

#thoughts p.republished {
    margin-top: 2em;
    padding-top: 1em;
    text-indent: 0;
    text-align: center;
    font-style: italic;
    font-size: smaller
}

#thoughts article hr {
    margin: 2em 1em;
    height: 2.33em;
    border-style: none;
    background: url(/img/hr-disc.png)50% 50%/auto 67%no-repeat,url(/img/fountain-trumpet-right.png)calc(50% - 1em) 50%/auto 60%no-repeat,url(/img/fountain-trumpet-left.png)calc(50% + 1em) 50%/auto 60%no-repeat,linear-gradient(90deg,rgba(64,0,0,0),rgba(64,0,0,.5),rgba(64,0,0,0)) 50% 50%/50% 3px no-repeat,linear-gradient(90deg,rgba(64,0,0,.3),rgba(64,0,0,.5),rgba(64,0,0,.3))0 50%/100% 1px no-repeat;
    filter: grayscale(.5) opacity(.67)
}

#thoughts[role=main] :is(ul,ol) {
    margin: 1.5em .5em 1.5em 1em;
    padding: 0 0 0 2em
}

#thoughts[role=main] :is(ul,ol) li {
    margin-block: .5em
}

#thoughts article figure,#thoughts article img.pic {
    float: right;
    max-width: 40%;
    margin-block: .5em 1em;
    margin-inline: 2em -2em
}

#thoughts module {
	 float: right;
    max-width: 40%;
    margin-block: .5em 1em;
    margin-inline: 2em -2em
	
}

#thoughts article img.pic.alt {
    float: left;
    margin-inline: -2em 2em
}

@media (min-width:50em) {
    #thoughts article figure,#thoughts article img.pic {
        margin-right: -1em
    }
}

#thoughts article .standalone {
    float: none;
    max-width: 100%;
    margin: 2em auto;
    display: block
}

#thoughts article .standalone img {
    display: block;
    margin: 0 auto
}

#thoughts article figcaption {
   /* margin-bottom: 1.5em; */
    padding-top: .33em;
    font-style: italic;
    text-align: center;
    font-size: 85%;
    line-height: 1.25
}

#thoughts article figcaption cite {
    font-style: normal
}

#thoughts article figcaption em {
    font-weight: 600
}

#thoughts .standalone+p,#thoughts :is(h1,h2,h3,h4,h5,h6)+p,#thoughts :not(p)+figure+p,#thoughts blockquote+p,#thoughts dl+p,#thoughts hr+p,#thoughts ol+p,#thoughts p:first-of-type,#thoughts pre+p,#thoughts table+p,#thoughts ul+p,#thoughts xmp+p {
    text-indent: 0
}

#thoughts .entry+.entry {
    margin: 1em 0
}

#thoughts .entry+.entry::before,.single #thoughts article .text>:last-child:after {
    content: "";
    display: block;
    height: 10em;
    margin: 8em -2em;
    background: url(/img/separator-big-05.png)50% 100%/contain no-repeat
}

.single #thoughts article .text>:last-child::after {
    margin: 5em -2em 2em
}

#thoughts .entry:nth-of-type(2n+1)::before,.single #thoughts article .text>:nth-child(2n+1)::after {
    background-image: url(/img/separator-big-02.png)
}

#thoughts .entry:nth-of-type(3n+1)::before,.single #thoughts article .text>:nth-child(3n+1)::after {
    background-image: url(/img/separator-big-03.png)
}

#thoughts .entry:nth-of-type(4n+1)::before,.single #thoughts article .text>:nth-child(4n+1)::after {
    background-image: url(/img/separator-big-04.png)
}

#thoughts .entry:nth-of-type(5n+1)::before,.single #thoughts article .text>:nth-child(5n+1)::after {
    background-image: url(/img/separator-big-01.png)
}

@media (min-width:50em) {
    #thoughts .entry:nth-of-type(2n) {
        transform: translate(-1vw,0)
    }

    #thoughts .entry:nth-of-type(3n) {
        transform: translate(3vw,0)
    }
}

@media (max-width:40em) {
    #thoughts .entry+.entry::before,.single #thoughts article .text>:last-child::after {
        margin: 3em .5em 5em
    }
}

#thoughts .entry .title {
    font-size: 200%;
    font-family: "Crimson Text", "Georgia", serif;
    line-height: 1.2;
    margin-top: .67em;
    margin-bottom: 0;
    margin-left: 0;
    hanging-punctuation: first allow-end
}

#thoughts .entry .title a {
    color: inherit;
    text-decoration-thickness: 2px;
    text-decoration-skip-ink: auto;
    padding: 0
}

#thoughts .entry .pubtime {
    display: block;
    margin: 0 0 1.5em;
    font-family: IM Fell English SC,Crimson Text,Georgia,serif;
    font-style: italic;
    font-size: 100%;
	 color: #444242
}

#thoughts .entry ul.meta {
    background: linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,.125),rgba(0,0,0,.25)) no-repeat 50% 1em/100% 1px;
    list-style: none;
    margin: 2em 0 0;
    padding: 1.5em 0 0;
    font-family: IM Fell English,Georgia,serif;
    font-size: 95%;
    line-height: 1.2;
    hyphens: auto;
    color: hsla(33deg,50%,10%,.67)
}

#thoughts .entry ul.meta li {
    display: inline;
    margin-right: .5ch
}

#thoughts .entry ul.meta li cite {
    font-size: 110%
}

@media (min-width:30em) {
    #thoughts .entry .title {
        font-size: 285%
    }
}

@media (min-width:40em) {
    #thoughts .entry .title {
        font-size: 305%
    }

    #thoughts .entry ul.meta {
        margin: 2em 1em 0;
        padding: 2em 1.5em 0
    }

    #thoughts .entry ul.meta a {
        white-space: nowrap
    }
}

#thoughts #comments ol,.recipe ul.time-yield li {
    list-style: none;
    margin: 0;
    padding: 0
}

#thoughts #comments>h3 {
    margin: 2em 0 0;
    background: linear-gradient(90deg,#654,transparent)0 100%/100% 1px no-repeat;
    color: #654
}

#thoughts #comments .response {
    padding: 2em 0 5em;
    position: relative
}

@media (min-width:50em) {
    #thoughts #comments {
        display: grid;
        grid-template-columns: min-content 1fr
    }

    #thoughts #comments>h3 {
        margin: 2em 1em 0 0;
        padding-right: .25em;
        writing-mode: vertical-rl;
        background: linear-gradient(180deg,#654,transparent) 100%0/1px 100%no-repeat
    }
}

@media (min-width:65em) {
    #thoughts #comments {
        margin-left: -5.5em
    }
}

#thoughts #comments .response.comment {
    border-bottom: 0 solid silver;
    background: url(/ui/i/hamonshu/separator-low.png)no-repeat 50% 100%/100% 1.5em
}

#thoughts #comments li[class*=back]+li[class*=back] {
    border-top: 1px solid silver
}

#thoughts #comments li[class*=back]+.comment {
    padding-top: 4em;
    border-top: 0 solid silver;
    background: url(/ui/i/hamonshu/separator-low.png)no-repeat 50% 100%/100% 1.5em,url(/ui/i/hamonshu/separator-low.png)no-repeat 50%0/100% 1.5em
}

#thoughts #comments .response.comment footer {
    font-family: IM Fell English;
    font-style: italic;
    font-size: 111%
}

#thoughts #comments .response.comment footer time {
    font-size: 88%
}

#thoughts #comments li[class*=back] {
    position: relative;
    padding: 1em 0;
    margin: 0 3em;
    font-style: italic;
    opacity: .5
}

#thoughts #comments li[class*=back]::before {
    content: "";
    position: absolute;
    height: 100%;
    right: 100%;
    top: 0;
    width: 2.5em;
    background: url(/ui/i/hamonshu/comment-pings.png)no-repeat 0 50%/1.5em auto
}

#thoughts #comments li[class*=back] div.text {
    margin-top: .5em;
    font-size: 90%
}

a.comment-edit-link {
    opacity: 0;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -5em;
    padding: 2em;
    font-size: 2em;
    transition: opacity 111ms
}

.response:hover a.comment-edit-link {
    opacity: 1
}

#commentform {
    grid-column: 1/-1;
    padding: 2em 1em 1em;
    margin-top: 5em;
    border-bottom: 1px solid
}

#commentform>header {
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid;
    margin-bottom: .25em
}

#commentform>header ul#rss-tb {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    flex-grow: 2;
    margin: 0
}

#commentform>header ul li {
    margin-left: .5em
}

#commentform header a,#commentform header a::before {
    content: "";
    display: inline-block;
    height: 1.67em;
    width: 1.67em;
    line-height: 2px;
    overflow: hidden;
    white-space: nowrap
}

#commentform header a::before {
    box-sizing: border-box;
    background: #eee;
    vertical-align: middle
}

#commentform header #tb a::before {
    background: url(/ui/i/hamonshu/comment-trackback.png)center/contain no-repeat
}

#commentform header li:not(#tb) a::before {
    background: url(/ui/i/hamonshu/comment-pings.png)center/contain no-repeat;
    transform: rotate(-30deg)
}

#commentform #fields {
    margin-bottom: 1em
}

#commentform fieldset {
    padding: 0;
    margin: 0;
    border: 0
}

@media (min-width:30em) {
    #commentform fieldset>div {
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-gap: 0 1.5em
    }
}

#commentform fieldset label {
    display: block;
    font-family: Crimson Text,IM Fell English,Georgia,serif;
    font-weight: 500
}

#commentform fieldset input[type=email],#commentform fieldset input[type=text] {
    font-size: 95%;
    padding: .25em
}

#commentform #form-info {
    margin-top: 1.25em;
    font-size: 95%
}

#commentform #form-info>:last-child,#thoughts .lyric :last-child {
    margin-bottom: 0
}

#commentform section {
    grid-column: 1/-1;
    margin-top: 1em
}

@media (min-width:40em) {
    #commentform section {
        margin-top: -1em
    }
}

#commentform section textarea {
    padding: .5em;
    width: 100%;
    box-sizing: border-box
}

#commentform section h4 {
    margin: 0;
    padding: .25em .5em;
    background: gray;
    color: #fff;
    font-size: 1em
}

#commentform section #comment_preview {
    margin-bottom: 2em;
    padding: .5em 1em;
    border: 1px solid #aaa;
    border-color: #aaa #ccb;
    background: linear-gradient(-1deg,rgba(0,0,0,.02),.33em,transparent 1em),linear-gradient(181deg,rgba(0,0,0,.03),.33em,transparent 1em)
}

#commentform input[type=submit] {
    font-family: Crimson Text,IM Fell English,Georgia,serif;
    font-size: 100%;
    padding: .25em 0 0
}

@media (min-width:40em) {
    #thoughts #commentform {
        margin-right: -15vw;
        padding: 0
    }
}

@media (min-width:60em) {
    #thoughts #commentform section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0 1.5em
    }

    #commentform section h4 {
        padding: .25em 0 0;
        background: 0 0;
        color: inherit
    }

    #commentform section #comment_preview {
        font-size: 90%
    }

    #commentform section #comment_preview>:first-child {
        margin-top: 0
    }

    #commentform section #comment_preview>:last-child {
        margin-bottom: 0
    }
}

@meda (min-width: 75em) {
    #thoughts ol+#commentform {
        margin-left: -10vw
    }
}

#thoughts a.more-link {
    display: block;
    width: 50%;
    margin: 2em auto 0;
    padding: 1em 2.5em;
    font-family: Crimson Text,IM Fell English,Georgia,serif;
    text-align: center;
    text-indent: 0;
    background: url(/ui/i/hamonshu/endcap-right.png)100% 50%/auto 100%no-repeat,url(/ui/i/hamonshu/endcap-left.png)0 50%/auto 100%no-repeat,linear-gradient(90deg,#4e4033aa,#4e4033bb)0 0/100% 1px no-repeat,linear-gradient(90deg,#615040aa,#5b4a3baa)0 100%/100% 1px no-repeat,#fed5;
    background-color: #fed5;
    border-radius: 1em/50%;
    text-decoration-color: rgba(0,0,0,.15)
}

#thoughts a.more-link:hover {
    background-color: #fed
}

article.recipe {
    padding: 0 2em 2em;
    margin: 2em 0;
    border: 1px solid rgba(0,0,0,.25);
    background: #fff;
    font-family: Calibri,Arial,Helvetica,sans-serif;
    box-shadow: .1em .1em .1em rgba(0,0,0,.1)
}

article.recipe h3 {
    padding: .5em 0 0;
    margin: .5em 0 0;
    border-bottom: 2px solid;
    font-size: 2em
}

article.recipe::after {
    content: "Source: "attr(data-url);
    display: list-item;
    list-style: square;
    margin-left: 1.5em;
    font-weight: 400
}

article.recipe h4 {
    border-bottom: 1px solid
}

.recipe ul.time-yield {
    display: flex;
    justify-content: space-between;
    margin: .125em 0 1.5em;
    padding: 0;
    font-style: italic
}

.recipe table {
    border-spacing: 0;
    width: 100%;
    line-height: 1.2
}

.recipe tr:nth-child(odd) {
    background: #e0e0e0
}

.recipe td {
    padding: .1em .5em .2em;
    vertical-align: top
}

.recipe .x4 {
    color: #050
}

.recipe .x2 {
    color: #005
}

.recipe .x1 {
    color: #200;
    font-weight: 600
}

.recipe ol.steps,.recipe ul.notes {
    margin-left: 0;
    padding-left: 1.5em
}

.recipe ol.steps li,.recipe ul.notes li {
    margin-bottom: .5em
}

.recipe ul.notes li {
    list-style: square
}

#thoughts .dialogue,#thoughts .lyric,#thoughts .poem {
    background-image: none
    
}

#thoughts .lyric,#thoughts .poem {
    white-space: pre-wrap
}

#thoughts .lyric br,#thoughts .poem br {
    display: none
}

#thoughts .dialogue p,#thoughts .lyric p,#thoughts .poem p {
    text-indent: 0;
    margin: 0
}

#thoughts .poem {
    font-style: italic;
    margin-left: 1em
}

#thoughts .poem p:first-child:not(:last-child) {
    margin-top: 1em
}

#thoughts .poem p.attrib {
    margin: 1.5em 0 0 .5em;
    font-size: smaller
}

 cite.poem {
	margin-bottom: 2em;
	display: block;
 }
 
.module.audio-player {
  
 border-top: 1px solid #b9b9b9;
  color: #9f3131
}

.group::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

@media (min-width:40em) {
   .module.audio-player .dek {
    font-size: 1.0em;
	font-style: italic;
}
}

.module {
  width: 40%;
  float: right;
  margin: 0.25em 1em 2em 1em;
    margin-top: 0.25em;
    margin-right: 1em;
    margin-left: 1em;
}
 

 q {

font-style:italic;	
font-size:130%;
font-weight: lighter
 }

 .panel ul li a {
	 text-decoration: none;
	  background: hsla(25deg,75%,25%,.1);
    padding: .15em .33em .1em;
    border: solid #fff8;
    border-width: 2px 0;
	border-radius: 15px;
	margin-top: 2em;
	line-height : 2;
}

.arch .panel {
  
  text-align: center;
}

/* video embed */

 .video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.video-embed iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}


img,video {
    max-width: 100%;
    height: auto;
  
    display: block;
    margin: 0px auto
}
body,html {
    margin: 0;
    padding: 0;
    font-family: "Crimson Text", "Georgia", serif;
    line-height: 1.2;
    min-height: 100vh
	
}

html {
    background: #fff
}
/*
@media (prefers-color-scheme:dark) {
    html,html #archipelago a:hover img,html img,html img.book.cover,html img.book.cover.big {
        filter: invert(1) 
    }

    html #thoughts figure.standalone img {
        box-shadow: .25em .25em .67em #fff8
    }
}
*/
body {
    font-size: 105.5%;
    background: linear-gradient(180deg,rgba(255,128,0,.033),3em,rgba(255,216,0,0) 33em),linear-gradient(90deg,hsla(34deg,0%,96%,.98) 5%,10%,hsla(34deg,38%,99%,.95) 25%,33%,hsla(34deg,38%,99%,1) 50%,67%,hsla(34deg,38%,99%,.975) 75%,90%,hsla(34deg,0%,96%,.98) 95%)0 0/100% 100%no-repeat,linear-gradient(179deg,hsla(34deg,38%,99%,1) 11em,hsla(34deg,38%,99%,0) 13em),linear-gradient(0deg,hsla(34deg,38%,99%,1) 23em,hsla(34deg,38%,99%,0) 42em),hsla(34deg,38%,99%,1);
    color: hsl(33deg,50%,10%)
}

@media (max-width:40em) {
    body {
        hyphens: auto
    }
}

@media (min-width:40em) {
    body {
        background: linear-gradient(180deg,rgba(255,128,0,.033),3em,rgba(255,216,0,0) 33em),linear-gradient(90deg,hsla(34deg,0%,96%,.98) 5%,10%,hsla(34deg,38%,99%,.95) 25%,33%,hsla(34deg,38%,99%,1) 50%,67%,hsla(34deg,38%,99%,.975) 75%,90%,hsla(34deg,0%,96%,.98) 95%)0 0/100% 100%no-repeat,linear-gradient(179deg,hsla(34deg,38%,99%,1) 11em,hsla(34deg,38%,99%,0) 13em),linear-gradient(0deg,hsla(34deg,38%,99%,1) 23em,hsla(34deg,38%,99%,0) 42em),url(/img/bg-waves.png)0 0,url(/img/bg-waves.png)250px -50px,hsla(34deg,38%,99%,1)
    }
}

h1 {
    font-weight: 500;
    font-family: "Crimson Text", "Georgia", serif;
    font-variant-numeric: lining-nums;
    font-size: 400%;
    line-height: 1.1;
    hanging-punctuation: first allow-end;
    margin: .67em 0 .67em -.1em
}

h2,h3,h4,h5,h6 {
    font-family: "Crimson Text", "Georgia", serif;
    font-weight: 500;
    line-height: 1.2;
    margin: 1.5em 0 .5em
}

h2 {
    font-size: 200%
}

h3 {
    font-size: 133%
}

h4 {
    font-size: 115%
}

h5 {
    font-size: 100%
}

h6 {
    font-size: 100%
}

@media (max-width:40em) {
    h1 {
        font-size: 400%
    }
}

@media (max-width:30em) {
    h1 {
        font-size: 300%
    }
}


p.note {
    font-style: italic;
    font-size: smaller;
    text-indent: 0
}

p.signature {
    font-family: 'IM Fell English',Georgia,serif;
    font-style: italic;
    font-size: 120%
}

p.signature::before {
    content: "— "
}

.title a[href],a[href]:hover {
    text-underline-offset: .15em
}

a[href] {
    text-decoration-thickness: .03875em;
    text-underline-offset: .2em;
    text-decoration-color: hsl(13deg,13%,67%);
    color: hsl(13deg,33%,42%)
}

a[href]:hover {
    text-decoration-thickness: .125em;
    text-decoration-color: currentColor
}

@supports (text-decoration-thickness:1px) {
    a[href]:hover {
        color: hsl(33deg,99%,33%)
    }
}

h1 a[href],h2 a[href],h3 a[href] {
    text-decoration-color: currentColor
}

img,video {
    max-width: 100%;
    height: auto
}

code,kbd,pre,tt,xmp,mark{
    font-family: "Monaco", "Courier New", "Courier";
    font-size: .933em;
    hyphens: none
}

mark{
    color: hsl(25deg,75%,25%);
	background: hsla(25deg,75%,25%,.1);
	 padding: .15em .33em .1em;
    border: solid #fff8;
    border-width: 2px 0
}

code{
    color: hsl(25deg,75%,25%)
}

kbd {
    color: hsl(145deg,75%,25%)
}

tt {
    color: hsl(25deg,15%,40%)
}

pre>code {
    margin: 1em 0;
    line-height: 1.2
}

:not(pre)>code,:not(pre)>kbd {
    background: hsla(25deg,75%,25%,.1);
    padding: .15em .33em .1em;
    border: solid #fff8;
    border-width: 2px 0
}

em.sagesse {
	background: hsla(25deg,75%,25%,.1);
   
    border: solid #fff8;
    border-width: 2px 0
}



:not(pre)>kbd {
    background-image: linear-gradient(135deg,transparent,rgba(255,255,255,.1),transparent);
    background-color: hsla(25deg,0%,0%,.1)
}

pre,xmp {
    margin: 1.5em .25ch;
    border-radius: .25em;
    padding: 1em;
    background: linear-gradient(to right,hsla(25deg,0%,33%,.1),67%,hsla(25deg,0%,33%,.075));
    white-space: pre-wrap;
    overflow-wrap: break-word;
    tab-size: 2.5
}

pre+pre,xmp+xmp {
    margin-top: -.5em
}

pre[class],xmp[class] {
    background: linear-gradient(to right,hsla(25deg,75%,25%,.1),67%,hsla(25deg,75%,25%,.075))
}

pre[class]::before,xmp[class]::before {
    display: block;
    padding: .125ch;
    margin: -1em -1em 1em;
    border-radius: .25em 0 0 .25em;
    content: attr(class);
    text-align: center;
    text-transform: uppercase;
    font: 600 90%Crimson Text,serif;
    background: hsla(25deg,75%,31%,.075);
    color: hsla(33deg,50%,10%,.75)
}

@media (min-width:40em) {
    pre[class],xmp[class] {
        display: grid;
        grid-template-columns: 1fr min-content;
        margin-right: -1.75em;
        padding: 0 0 0 1em
    }

    pre[class]::before,xmp[class]::before {
        grid-column: 2;
        grid-row: 1/-1;
        margin: 0 0 0 1em;
        padding-left: .05ch;
        writing-mode: vertical-lr
    }
}

del {
    opacity: .4;
    text-decoration-thickness: .25em;
    text-decoration-color: rgba(0,0,0,.5)
}

ins {
    background: rgba(255,255,0,.5);
    border: solid #fff8;
    border-width: 2px 0
}

div:not(#main) ol,div:not(#main) ul {
    margin: 0;
    padding: 0
}

#main>dl dt {
    text-align: left;
    margin: 1.5em 0 0;
    padding: 0;
    border-right: none;
    font-weight: 600
}

#main>dl dd {
    margin: .5em 0;
    padding: 0 0 0 1em;
    max-width: 75ch
}

@media (min-width:45em) {
    #main>dl.compact {
        display: grid;
        grid-template-columns: 16ch 1fr;
        align-items: baseline
    }

    #main>dl.compact dt {
        text-align: right;
        margin: .5em 0;
        padding: 0 .5em 0 0;
        border-right: .125em solid rgba(0,0,0,.5)
    }

    #main>dl.compact dd {
        margin: .5em 0;
        padding: 0 .5em;
        max-width: 75ch
    }
}

blockquote {
    color: hsl(33deg,5%,33%);
    margin: 1.5em 1em;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: auto 1em,auto 1em,100% 1px,100% 1px;
    background-position: 0 0,100% 100%,50%0,50% 100%
}

blockquote>:first-child {
    margin-top: 0
}

blockquote>:last-child {
    margin-bottom: 0
}

blockquote p.attrib,blockquote+p.attrib {
    font-size: 90%;
    font-style: normal
}

.framed {
    border: 3px double currentColor
}

img.border {
    border: 2px solid currentColor
}

img.book {
    border: 1px solid rgba(0,0,0,.1)
}

img.book.cover {
    filter: drop-shadow(.33em .33em .125em rgba(0,0,0,.125)) drop-shadow(.25em .25em .125em rgba(0,0,0,.33)) drop-shadow(.1em .1em .125em rgba(0,0,0,.25)) drop-shadow(0 0 .2em rgba(0,0,0,.1))
}

img.book.cover.big {
    filter: drop-shadow(.1em .1em .125em rgba(0,0,0,.25)) drop-shadow(.15em .15em .15em rgba(0,0,0,.25)) drop-shadow(.33em .33em .15em rgba(0,0,0,.15)) drop-shadow(.5em .5em .2em rgba(0,0,0,.2)) drop-shadow(.67em .67em .25em rgba(0,0,0,.25)) drop-shadow(1.33em 1.33em .33em rgba(0,0,0,.3)) drop-shadow(0 0 .2em rgba(0,0,0,.1))
}

table {
    margin: 1em;
    border-collapse: separate;
    border-spacing: 1px
}

table caption {
    font-style: italic;
    font-size: 90%;
    line-height: 1.2;
    margin-top: .15em;
    caption-side: bottom
}

table td,table th {
    padding: .2em .25em .1em
}

table.data {
    margin: 1.5em 0;
    min-width: 50%
}

table.data :not(caption) {
    font: 1em Source Sans Pro,Open Sans,Helvetica,sans-serif
}

table.data th {
    padding: .5ch 1ch .25ch;
    font-weight: 550
}

table.data td {
    padding: .25ch 1ch .15ch
}

table.data thead th {
    background: rgba(191,128,64,.5)
}

table.data tbody tr:nth-child(odd)>* {
    background: rgba(191,128,64,.13)
}

table.data tbody tr:nth-child(even)>* {
    background: rgba(191,128,64,.25)
}

table.data :not(thead)+tbody tr:first-child>* {
    border-top: 2px solid rgba(191,128,64,.5)
}

table.data tbody tr:last-child>* {
    border-bottom: 2px solid rgba(191,128,64,.5)
}

table.chart {
    margin: 1.5em 0;
    border-collapse: separate;
    border-spacing: 0
}

table.chart td,table.chart th {
    padding: .75em .5em;
    text-align: left;
    vertical-align: top
}

table.chart tbody tr td {
    border-top: 1px solid rgba(0,0,0,.25)
}

table.chart td>:only-child {
    margin: 0
}

body>#main,body>#thoughts {
    padding-top: 2em;
    padding-left: 1em;
    padding-right: 1em;
    line-height: 1.45;
	  font-size: 18px;
}

@media (min-width:40em) {
    body,body.arch {
        display: grid;
        grid-template-columns: [left]minmax(1em,1fr)[main]minmax(10em,40em)[right]minmax(10em,1fr);
        grid-template-rows: repeat(7,min-content) auto repeat(2,min-content);
        grid-gap: 0 2em
    }

    body.arch {
        grid-template-columns: [left]minmax(7em,1fr)[main]minmax(10em,40em)[right]minmax(10em,1fr)
    }

    body>* {
        grid-column: 1/-1
    }

    body>#main,body>#thoughts {
        grid-column: main;
        grid-row: 1/-3;
        padding: 3em 0 0
    }

}


	

#navigate {
  
    top: 0;
    left: 0;
    right: 0; 
    z-index: 42;
    font-size: 1.125em
}

#navlinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1em 1em 0;
	margin: 0;
	list-style: none;
	font-family: IM Fell English, Georgia, serif;
}
#navlinks li {
	text-align: center;
	padding: 0.25em 0.5em;
}
#navlinks a[href] {
	display: block;
	padding: 0;
	color: hsla(33deg,50%,10%,0.75);
	
}



#archipelago ul,#navlinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none
}

#navlinks {
    /* padding: 1em 1em 0; */
	
    margin: 0 0 1em 0;
    font-family: IM Fell English,Georgia,serif;
	justify-content: start
}

#navlinks li {
    text-align: center;
    padding: .25em .5em
}

#navlinks a[href] {
    display: block;
    padding: 0;
    color: hsla(33deg,50%,10%,.75)
}

#navlinks li.active a[href] {
    color: hsl(33deg,99%,33%)	   
}

body.about #navigate #navlinks #aboutsite,body.arch #navigate #navlinks #archLink,body.css #navigate #navlinks #cssLink,body.feeds #navigate #navlinks #feedsLink,body.other #navigate #navlinks #otherLink,body.speak #navigate #navlinks #speakLink,body.tools #navigate #navlinks #toolsLink,body.write #navigate #navlinks #writeLink {
    font-weight: 600;
    font-style: italic
}

@media (min-width:40em) {
    #navigate {
        position: sticky;
        grid-column: right;
        grid-row: 1;
        background: radial-gradient(ellipse 100% 100%at 75% 50%,hsla(34deg,38%,98%,1) 25%,hsla(34deg,38%,98%,0) 75%)
    }

    #navlinks {
        display: block;
        padding: 0;
        margin-bottom: 2.5em
    }

    #navlinks li {
        text-align: right;
        padding: .25em 1em
    }

   

    #main {
        grid-column: 1/ - 1;
        grid-row: 3/span 3
    }
}

footer#global::before {
    content: "";
    display: block;
    height: 6.5em;
    background: url(/img/footer-curl.png)-10px 0/auto 100%no-repeat,url(/img/footer-wave.png)0 100%/auto 2em repeat-x,url(/img/footer-wave.png)0 95%/auto 1.5em repeat-x;
    mix-blend-mode: darken
}

@supports (mix-blend-mode:darken) {
    footer#global::before {
        background: url(/img/footer-curl.png)-10px 0/auto 100%no-repeat,url(/img/footer-wave.png)0 100%/auto 2em repeat-x,url(/img/footer-wave.png)0 95%/auto 1.5em repeat-x,linear-gradient(179.5deg,hsla(34deg,38%,99%,1),hsl(25deg,0%,97%))0 0/100% 100%
    }
}

footer#global {
    grid-column: 1/-1;
    grid-row: -2;
    clear: both;
    margin-top: 2em;
    padding: 0;
    font-family: IM Fell English, Georgia, serif;
    font-size: 95% 
	
}

footer#global>div {
    background: 50% 99%/4em auto no-repeat,linear-gradient(-1deg,rgba(0,0,0,.2),33%,transparent 90%),#efecee;
    padding: 2em 3em 4em;
	color: hsl(33deg,50%,10%)
}

#archipelago {
    grid-column: 2;
    grid-row: 1/-1
}

.sosumi {
    grid-column: 3;
    grid-row: 1
}

.sosumi p {
	margin: 0;
}

#design.credits {
    grid-column: 3;
    grid-row: 2;
    align-self: start
}

#wordpress.credits {
    grid-column: 1;
    grid-row: 2
}

footer#global>div div {
    margin: 1em 0
}

footer#global strong {
    font-weight: 600
}

@media (min-width:50em) {
    footer#global>div {
        display: grid;
        grid-template-columns: 1fr 9em 1fr;
        grid-template-rows: repeat(2,min-content);
        grid-gap: 1em 2.5em;
        padding-right: 4em;
        background-position: 100% 40%,center
    }

   
	
	#wordpress, #excuse{
		 text-align: right
}

    #excuse,.sosumi {
        align-self: start;
		/*padding-top: 20px; */
    }

    footer#global>div div {
        margin: 0
    }

    footer#global a[href],footer#global strong {
        white-space: nowrap
    }
}

#archipelago h3 {
    text-align: center;
    margin: 0 0 .75em;
    font-family:  "Crimson Text", "Georgia", serif;
    font-style: italic;
    line-height: 1.1
}

#archipelago ul {
    margin: 0 0 1em;
    padding: 0
}

#archipelago ul a {
    margin: 0 1ch
}

#archipelago a img {
    max-height: 2.5em;
    filter: grayscale(1) drop-shadow(0 0 0 rgba(0,0,0,.25));
    transition-duration: 100ms
}

#archipelago a:hover img {
    filter: grayscale(0) drop-shadow(.25em .25em .125em rgba(148,90,90,.68));
    transform: translate(-.125em,-.125em)
}

#excuse {
    color: inherit
}

#excuse>* {
    display: inline;
    font-size: 1.1em;
    margin: 0
}

#excuse>h4 {
    font-size: 111%
}

#excuse>h4::after {
    content: ": "
}

#excuse>p {
    white-space: nowrap
}

#excuse>p::after {
    content: ":"
}

/*
<figure>

*/

figure {
 margin-bottom: 2em;	
}

.faq-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.faq-item {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}

.faq-question {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    margin: 0;
    position: relative;
    padding: 10px;
    transition: background-color 0.3s;
}

.faq-question:hover {
    background-color: #f9f9f9;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: 1em;
    color: #666;
    padding-left: 10px;
}

.faq-answer.active {
    max-height: 200px; /* Ajustez cette valeur en fonction de la longueur des réponses */
    margin-top: 10px;
}

.faq-question {
    /* ... vos styles existants ... */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-icon {
    font-size: 1.2em;
    transition: transform 0.3s ease;
}

.faq-question.active .faq-icon {
    transform: rotate(45deg);
}

.faq-question.active {
    background-color: #f0f0f0;
}

.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
	 align-items: flex-start;
}

column {
    flex: 1;
    padding: 10px;
    min-width: 50%; /* Assure que chaque colonne prenne au moins 50% de la largeur */
	
}



h2 {
    /*! font-size: 200%; */
}

p {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5em;
    paragraph-spacing: 20px;
    text-alignment: start;
    text-color: #4b4b4b;
    text-transform: none
}

.container,.form {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.container {
    border-color: #333;
    border-style: solid;
    border-width: 0 0 1px
}

.form {
    padding-bottom: 10px
}

.fleche::after {
    content: " ➝"
}

.email::after {
    content: " ➝ "
}

.une,form {
    background: linear-gradient(-1deg,rgba(0,0,0,.2),33%,transparent 90%),#efecee;
    border-radius: 16px;
    width: 100%;
    opacity: 1;
    padding: 1Opx
}

.une {
    cursor: pointer;
    display: block;
    padding: 1Opx 1Opx 5px;
    transform: translateY(0);
    transition: transform .4s ease-in-out
}

.une:hover {
    transform: translateY(-10px)
}

button[type=submit],input[type=submit] {
   
    line-height: 1.4em;
    outline: 0;
    border: medium;
    border-radius: 8px;
    padding: 16px;
    font-weight: 600;
    font-size: 1,5vw;
    background: #252525;
    cursor: pointer;
    color: #fff;
    z-index: 1;
    opacity: 1
}

[type=text],input[type=email], textarea {
    -webkit-appearance: none;
    display: inline-block;
    width: 80%;
    line-height: 1.4em;
    outline: 0;
    border: 0;
    padding: 16px;
    border-radius: 8px;
    font-weight: 400;
    font-size: 16px;
    background: #fff;
    color: #252525;
    box-shadow: inset 0 0 0 1px transparent
}

form p {
	text-align: center;
	
}

a.list,p {
    text-decoration: none
}

a.list,a.list:hover {
    color: hsl(33deg,50%,10%)
}

.contact {
    margin-top: 35px
}

blockquote::after,blockquote::before {
    content: ' " '
}

.arch .panel {
    font-family: 'IM Fell English',Georgia,serif;
    padding: 1em
}

.panel {
    color: hsla(33deg,50%,10%,.75)
}

.tile {
  display: flex;
  justify-content:flex-start;
  overflow: hidden;
  margin: 0 auto;
position: relative;
} 

.tile_inner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  color: #fff;
  padding: 0;
  line-height: 1.4;
   background-image: linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,.15) 50%,rgba(0,0,0,.4) 100%);

}

.tile_link::after {
 content:'';
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
 z-index:1
}

.tile_inner .tile_name {
 color:#fff;
 word-wrap:break-word;
 overflow-wrap:break-word;
 hyphens:auto;
 display:block;

}


.tile:focus-within .tile_inner,
.tile:hover .tile_inner {
 background-image:linear-gradient(0deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.4) 100%)
}

.tile_inner .tile_desc {
 pointer-events:none;
 display:block;
 opacity:0;
 transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1);
 transform: translateY(0);
 padding-left: 0.5em;
}

.tile:hover .tile_desc,
.tile_link:focus+.tile_desc {
-webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
         -moz-transform: translateY( 10px);
 opacity:1;

  
}

a.tile_link {
	 text-decoration: none;
}

.tile_inner h3 {
	margin-top:0.3em;
	padding-left: 0.5em;
	font-weight: bold;
}

/* --------------------------------------------------------------------------------- 
   hero
   --------------------------------------------------------------------------------- */
   
 blockquote.hero { margin: 0 auto; padding: 0 1em; border-left: 3px solid hsl(33deg,5%,33%); color: hsl(33deg,50%,10%); font-style: normal;}
 
 blockquote.hero:before {display: none;}
 
 blockquote.hero:after {display: none;}
 
 blockquote.hero cite:before  {content: '— ';} 
 
 blockquote.hero cite  {color: hsl(33deg,5%,33%); margin-top: 1em;}
 
 blockquote.hero p {font-size: 110%;}

/* soundcite - v0.5.1 - 2017-07-10
 * Copyright (c) 2017 Tyler J. Fisher and Northwestern University Knight Lab
 */

/*PLAYER CHROME*/

@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); opacity: 0.4; }
	50%  { -webkit-transform: rotate(180deg); opacity: 1; }
	to   { -webkit-transform: rotate(360deg); opacity: 0.4; }
}

@-moz-keyframes spin {
	from { -moz-transform: rotate(0deg); opacity: 0.4; }
	50%  { -moz-transform: rotate(180deg); opacity: 1; }
	to   { -moz-transform: rotate(360deg); opacity: 0.4; }
}

@-ms-keyframes spin {
	from { -ms-transform: rotate(0deg); opacity: 0.4; }
	50%  { -ms-transform: rotate(180deg); opacity: 1; }
	to   { -ms-transform: rotate(360deg); opacity: 0.4; }
}

@-o-keyframes spin {
	from { -o-transform: rotate(0deg); opacity: 0.4; }
	50%  { -o-transform: rotate(180deg); opacity: 1; }
	to   { -o-transform: rotate(360deg); opacity: 0.4; }
}

@keyframes spin {
	from { transform: rotate(0deg); opacity: 0.2; }
	50%  { transform: rotate(180deg); opacity: 1; }
	to   { transform: rotate(360deg); opacity: 0.2; }
}

.soundcite-loaded {
    border-radius: 0.25em;
    padding: 0.25em 1em 0.33em 1em;
    cursor: pointer;
	font-family: "Monaco", "Courier New", "Courier";
    font-size: .933em;
    color: hsl(33deg,50%,10%);
    border: solid #fff8;
  
}


.soundcite-loaded:before {
    display: inline-block;
    content: "";
    vertical-align: -10%;
    margin-right: 0.25em;
}

.soundcite-loading:before {
    margin-right: 0.5em;
    font-size: 0.9em;
    position: relative;
    top: -.05em;
    height: 0.75em;    
    width: 0.75em;
    border: 2px solid #000;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    -ms-animation: spin 1s linear infinite;
    -o-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

.soundcite-play:before {
    font-size: 0.9em;
    position: relative;
    top: -.05em;
    border: 0.5em solid transparent;
    border-left: 0.75em solid black;
}

.soundcite-pause:before {
    font-size: 0.9em;
    position: relative;
    top: -.05em;
    height: 1em;
    border-left: .75em double black;
    border-right: .5em solid transparent;
}
blockquote {content: '  ';}