/* The Shipwright's Creed as a charter: aged parchment with a deckled edge, laid on the night sea. The ship's woodcut
   above a ribbon with the title; each article under a large scarlet numeral, its title in blackletter; an engraved
   rule between articles; the closing line in blackletter between double rules. No signature (owner). */
.creed-table{padding:calc(var(--head-h) + clamp(28px,5vw,64px)) var(--gutter) clamp(64px,9vw,120px);
  background:radial-gradient(ellipse 80% 60% at 50% 30%, #17344a 0%, var(--night) 55%, var(--night-2) 100%)}
.charter{position:relative;max-width:760px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(26px,6vw,80px) clamp(76px,9vw,104px);color:var(--ink);
  background:
    radial-gradient(ellipse 40% 28% at 82% 14%, rgba(150,104,48,.16), transparent 70%),
    radial-gradient(ellipse 34% 22% at 14% 78%, rgba(150,104,48,.14), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(120,82,36,.30) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #f1e4c4, #e8d6ae);
  background-size:100% 100%,100% 100%,100% 100%,220px 220px,100% 100%;background-repeat:no-repeat,no-repeat,no-repeat,repeat,no-repeat;
  mask-image:url(../img/paper-edge.svg);mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:url(../img/paper-edge.svg);-webkit-mask-size:100% 100%;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.5))}
/* the title banner: the engraved ribbon (the h1 is kept for readers and search, hidden), the wax seal pressed below */
.creed-banner{display:grid;justify-items:center;margin:0 auto clamp(18px,2.6vw,28px)}
.creed-ribbon{display:block;width:min(100%,640px);height:auto}
.creed-seal{display:block;width:clamp(84px,9vw,112px);height:auto;margin-top:-14px;filter:drop-shadow(0 3px 4px rgba(40,10,6,.35))}
.vignette{display:block;width:clamp(84px,12vw,120px);height:auto;margin:0 auto 6px;opacity:.9}
/* the ribbon: a banner with folded tails, the title in blackletter */
.ribbon{position:relative;margin:0 auto clamp(22px,3vw,32px);max-width:600px;padding:.38em 1.6em .48em;background:linear-gradient(180deg,#b9302a,#8e1c16);
  box-shadow:0 6px 0 -2px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);text-align:center}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:.5em;bottom:-.5em;width:2.2em;background:#7a1712;z-index:-1}
.ribbon::before{left:-1.6em;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,.75em 50%)}
.ribbon::after{right:-1.6em;clip-path:polygon(0 0,100% 0,calc(100% - .75em) 50%,100% 100%,0 100%)}
.ribbon h1{margin:0;font:400 clamp(1.9rem,5vw,3.1rem)/1.05 var(--display);color:var(--stock-hi);text-shadow:0 2px 0 rgba(0,0,0,.25);letter-spacing:var(--display-track)}
.opening{margin:0 auto clamp(30px,4vw,44px);max-width:34em;text-align:center;font:italic 400 clamp(1.15rem,2.2vw,1.4rem)/1.5 var(--fell);color:var(--ink-2)}
.articles{list-style:none;margin:0;padding:0}
.articles li{position:relative;margin:0;padding:0 0 0 clamp(4rem,10vw,5.4rem);min-height:3.2rem}
.articles li + li{margin-top:clamp(20px,3vw,28px);padding-top:clamp(20px,3vw,28px)}
/* an engraved rule with a lozenge between articles */
.articles li + li::before{content:"";position:absolute;left:clamp(4rem,10vw,5.4rem);right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(28,24,20,.35) 20%,rgba(28,24,20,.35) 80%,transparent)}
.articles li + li::after{content:"";position:absolute;top:-4px;left:calc(clamp(4rem,10vw,5.4rem) + (100% - clamp(4rem,10vw,5.4rem)) / 2 - 4px);width:8px;height:8px;background:var(--scarlet);transform:rotate(45deg)}
.articles h2{margin:0 0 .25em;font:400 clamp(1.45rem,3vw,1.85rem)/1.1 var(--display);color:var(--ink);letter-spacing:var(--display-track)}
.articles .num{position:absolute;left:0;width:clamp(3.2rem,8vw,4.4rem);text-align:right;font:400 clamp(2rem,5vw,2.9rem)/1 var(--numeral);color:var(--scarlet);margin-top:-.08em}
.articles li + li .num{top:clamp(20px,3vw,28px)}
.articles li > p{margin:0;font-size:1.05rem;color:var(--ink-2)}
.creed-close{margin:clamp(40px,5vw,58px) 0 0;padding:clamp(18px,2.6vw,26px) 0;border-top:3px double rgba(28,24,20,.45);border-bottom:3px double rgba(28,24,20,.45);
  font:400 clamp(1.7rem,4.2vw,2.6rem)/1.15 var(--display);color:var(--ink);text-align:center;max-width:none;letter-spacing:var(--display-track)}
.creed-close span{display:block}
@media (max-width:560px){
  .creed-table{padding-left:0;padding-right:0}
  .charter{max-width:none;margin:0 6px}
  .ribbon{margin-left:.6em;margin-right:.6em;padding-left:.9em;padding-right:.9em}
  .ribbon::before{left:-1.1em;width:1.6em} .ribbon::after{right:-1.1em;width:1.6em}
}