/* Fonts */

@font-face {
    font-display: swap;
    font-family: "Forma";
    font-style: normal;
    font-weight: 100 900;
    src: url("../fonts/Forma.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Forma Mono";
    font-style: normal;
    font-weight: 100 900;
    src: url("../fonts/FormaMono.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Rocksalt";
    font-style: normal;
    font-weight: 100 900;
    src: url("../fonts/Rocksalt.woff2") format("woff2");
}

/* Custom properties */

:root {
    --border-body:        lch(90% 15 90 / 75%);
    --border-photo:       lch(80% 5 90 / 50%);
    --color-bg:           lch(96% 5 90);
    --color-txt:          lch(10% 100 90);
    --font-mono:          "Forma Mono", monospace;
    --font-sans:          "Forma", sans-serif;
    --font-handwritten:   "Rocksalt", serif;
    --photo-border-color: lch(99% 5 90);
    --color-tape-paper:   lch(93% 10 92);  /* fixed cream for the gallery caption tape */
    --shadow-photo:       0 2px 8px lch(0% 0 0 / 10%), 0 1px 2px lch(0% 0 0 / 8%);
    --size-font:          clamp(1rem, 0.9375rem + 0.3125vw, 1.125rem);
    --mark-size:          var(--space-s);  /* arm length of the L-shaped corner marks */
    --space-3xs:          clamp(0.25rem, 0.2188rem + 0.1563vw, 0.3125rem);
    --space-2xs:          clamp(0.5rem, 0.4688rem + 0.1563vw, 0.5625rem);
    --space-xs:           clamp(0.75rem, 0.6875rem + 0.3125vw, 0.875rem);
    --space-s:            clamp(1rem, 0.9375rem + 0.3125vw, 1.125rem);
    --space-m:            clamp(1.5rem, 1.4063rem + 0.4688vw, 1.6875rem);
    --space-l:            clamp(2rem, 1.875rem + 0.625vw, 2.25rem);
    --space-xl:           clamp(3rem, 2.8125rem + 0.9375vw, 3.375rem);
    --space-2xl:          clamp(4rem, 3.75rem + 1.25vw, 4.5rem);
    --space-3xl:          clamp(6rem, 5.625rem + 1.875vw, 6.75rem);
}

/* Colours */

:root, .archive h2 {
    --color-hover:  lch(25% 85 var(--hue));
    --color-markup: lch(20% 85 var(--hue));
    --color-muted:  lch(45% 10 var(--hue));
    --color-shadow: lch(5% 50 var(--hue) / 50%);
    --color-tape:   lch(90% 20 calc(var(--hue) + 180));
    --color-theme:  lch(30% 85 var(--hue));
    --shadow-text:  0 -1px 1px lch(10% 100 var(--hue) / 8%);
}

/* Base */

::selection {
    background: var(--color-markup);
    color:      var(--color-bg);
}

html {
    background: var(--color-theme);
}

body {
    background:            var(--color-bg);
    background-image:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.045'/%3E%3C/svg%3E");
    border:                1px solid var(--border-body);
    border-radius:         1px;
    box-shadow:            0 var(--space-2xs) var(--space-m) calc(var(--space-2xs) * -1) var(--color-shadow);
    color:                 var(--color-txt);
    display:               grid;
    font-family:           var(--font-mono);
    font-size:             var(--size-font);
    font-synthesis:        none;
    grid-template-columns: 0 minmax(0, 1fr) 0;
    hyphenate-limit-chars: 7 3 4;
    hyphens:               auto;
    line-height:           1.75;
    max-width:             900px;
    padding:               var(--space-s) var(--space-s) var(--space-s) var(--space-s);
    text-align:            left;
    text-shadow:           var(--shadow-text);
}

@media screen and (min-width: 768px) {
    body {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 6.25fr) minmax(0, 1fr);
        margin:  var(--space-s);
        padding: var(--space-m) var(--space-m) var(--space-m) var(--space-m);
    }
}

@media screen and (min-width: 1024px) {
    body {
        margin:  var(--space-3xl) auto;
        padding: var(--space-l) var(--space-l) var(--space-l) var(--space-l);
    }
}

[data-tooltip] {
	display: inline-block;
	font-family: var(--font-sans);
	position: relative;
}

[data-tooltip]::before {
	border-color: lch(from var(--color-txt) l 10 h / 75%) transparent transparent transparent;
	border-width: 5px 5px 0 5px;
    border-style: solid;
    content: "";
    opacity:0;
    position: absolute;
    	top: -5px;
    	left: 50%;
    transform: translateX(-50%);
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
	opacity: 1;
	transition: opacity 0.5s ease;
}

[data-tooltip]::after {
	background: lch(from var(--color-txt) l 10 h / 75%);
	border-radius: 1px;
	color: var(--color-bg);
    content: attr(data-tooltip);
    font-size: small;
    opacity: 0;
    padding: var(--space-3xs) var(--space-2xs);
    pointer-events: none;
    position: absolute;
    	top: -5px;
    	left: 50%;
    transform: translateX(-50%)   translateY(-100%);
    width: max-content;
    z-index: 99;
}

a {
    color:                 inherit;
    text-decoration-color: var(--color-markup);
    text-underline-offset: 2px;
}

a:focus,
a:hover {
    background:            var(--color-hover);
    color:                 var(--color-bg);
    text-decoration:       none;
    text-underline-offset: 2px;
}

a:focus > *,
a:hover > * {
    color: var(--color-bg) !important;
}

a:has(sup) {
    text-underline-offset: -10px;
}

a.none {
	text-decoration: none;
}

a.title {
    color: var(--color-markup);
}

a.icon svg {
    color:      var(--color-markup);
    fill:       var(--color-markup);
    transition: all 0.25s ease;
    will-change: transform;
}

a.icon:focus,
a.icon:hover {
    background: unset;
    color:      inherit;
    cursor:     pointer;
}

a.icon:focus svg,
a.icon:hover svg {
    color:     var(--color-hover) !important;
    fill:      var(--color-hover) !important;
    transform: scale(1.25);
}

em, i {
    font-style:              italic;
    font-variation-settings: "slnt" -8;
}

.h1, .h2, .h3,
h1, h2, h3 {
    font-size:   var(--size-font);
    font-weight: 400;
    margin:      0;
    text-wrap:   stable;
}

.h1, h1,
.h2, h2 {
    text-transform: uppercase;
}

figure {
    border-radius: 1px;
    margin:        0;
    padding:       0;
}

figure .kg-width-full,
figure .kg-width-wide,
figure img {
    border-radius: 1px;
    height:        auto;
    width:         100%;
}

.optional {
    display: none;
}

@media screen and (min-width: 768px) {
    .optional {
        display: initial;
    }
}

.sans {
	font-family: var(--font-sans);
	font-weight: bold;
}

.tp {
    line-height: inherit;
}

/* Header */

#header {
	border-bottom: 3px solid var(--color-markup);
	grid-column: 1 / -1;
}

#header .logo {
    align-items:     center;
    color: var(--color-markup);
    display: flex;
    	gap: var(--space-l);
    justify-content: center;
    margin: 0 0 var(--space-2xs) 0;
    text-transform: uppercase;
}

@media screen and (min-width: 768px) {
    #header .logo {
    	margin: 0 0 var(--space-s) 0;
    }
}

@media screen and (min-width: 1024px) {
    #header .logo {
    	margin: 0 0 var(--space-m) 0;
    }
}

#header .logo svg {
    color:  var(--color-markup);
    fill:   var(--color-markup);
    height: var(--space-2xl);
    width:  var(--space-2xl);
}

/* Main */

#main {
    grid-column: 1 / -1;
    margin: var(--space-xs) 0 0 0;
}

#main .article {
    display:               grid;
    gap:                   var(--space-xl) var(--space-2xs);
    grid-template-columns: 0 minmax(0, 1fr) 0;
}

@media screen and (min-width: 768px) {
    #main .article {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 6.25fr) minmax(0, 1fr);
    }
}

/* Shared "photographic print" wrapper — used by the hero, by standalone /
   captioned content images, and by gallery cells. Provides the positioning
   context for the corner .marks and centres the print. The hero adds only its
   own layout (full grid width + top margin). */
.photo {
    overflow:   visible;
    position:   relative;
    text-align: center;
}

#main .article .hero {
    grid-column: 1 / -1;
    margin:      var(--space-m) 0 0 0;
}

.photo img:hover {
    cursor: zoom-in;
}

.marks {
    inset:          0;
    pointer-events: none;
    position:       absolute;
}

.marks::before,
.marks::after {
    color:    var(--color-muted);
    content:  "";
    height:   var(--mark-size);
    position: absolute;
    width:    var(--mark-size);
}

.marks::before {
    border-left: 1px solid currentColor;
    border-top:  1px solid currentColor;
    left:        0;
    top:         0;
}

.marks::after {
    border-right: 1px solid currentColor;
    border-top:   1px solid currentColor;
    right:        0;
    top:          0;
}

.marks > span {
    height:   var(--mark-size);
    position: absolute;
    width:    var(--mark-size);
}

.marks > span:first-child {
    border-bottom: 1px solid var(--color-muted);
    border-left:   1px solid var(--color-muted);
    bottom:        0;
    left:          0;
}

.marks > span:last-child {
    border-bottom: 1px solid var(--color-muted);
    border-right:  1px solid var(--color-muted);
    bottom:        0;
    right:         0;
}

.photo-print {
    background-color: var(--photo-border-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    border:           1px solid var(--border-photo);
    border-radius:    1px;
    box-shadow:       var(--shadow-photo);
    display:          inline-block;
    max-width:        100%;
    padding:          var(--photo-pad, var(--space-xs));
    position:         relative;
    transform:        rotate(var(--photo-twist, 0deg));
    transform-origin: center center;
}

.photo-print picture {
    display:     block;
    line-height: 0;
    position: relative;
}

.photo-print img {
    border-radius: 1px;
    display:       block;
    height:        auto;
    width:         100%;
}

.photo-print figcaption {
	background: var(--photo-border-color);
	font-family: var(--font-handwritten);
	font-size: small;
	margin: var(--space-xs) 0 var(--space-m) 0;
    text-align: right;
}

.photo-sheen {
    bottom:         0;
    left:           0;
    overflow:       hidden;
    pointer-events: none;
    position:       absolute;
    right:          0;
    top:            0;
}

.photo-sheen svg {
    height:   100%;
    left:     0;
    position: absolute;
    top:      0;
    width:    100%;
}

.wt-overlay {
    filter:         drop-shadow(0px 1px 1.5px rgba(60, 40, 20, 0.18));
    left:           0;
    overflow:       visible;
    pointer-events: none;
    position:       absolute;
    top:            0;
    will-change:    transform, width, height;
}

/* Article header */

#main .article .header {
    grid-column: 2 / -2;
    margin:      var(--space-s) 0 var(--space-s) 0;
}

#main .article .header .title {
    background: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent 0.05ch,
        currentColor 0.05ch,
        currentColor 0.95ch,
        transparent 0.95ch,
        transparent 1ch
    ),
    repeating-linear-gradient(
        to right,
        transparent 0,
        transparent 0.05ch,
        currentColor 0.05ch,
        currentColor 0.95ch,
        transparent 0.95ch,
        transparent 1ch
    );
    background-position: 0 100%, 0 calc(100% - 4px);
    background-repeat:   no-repeat;
    background-size:     100% 2px, 100% 2px;
    color:               var(--color-markup);
    display:             table;
    padding-bottom:      4px;
}

#main .article .header .memo {
	grid-column: 1 / -1;
	margin: var(--space-2xs) 0 0 0;
	text-transform: uppercase;
	
	& .sans {
		color: var(--color-muted);
	}
}

/* Article content */

#main .article .content {
    grid-column: 2 / -2;
}

#main .article .content b,
#main .article .content strong {
    color:       var(--color-markup);
    font-weight: 400;
}

#main .article .content blockquote {
    line-height: 1.75em;
    margin:      var(--space-s) min(4vw, 4ch);
    overflow:    hidden;
    padding:     0 0 0 2ch;
    position:    relative;
}

#main .article .content blockquote::before {
    color:       var(--color-markup);
    content:     ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A'";
    left:        0;
    position:    absolute;
    top:         0;
    white-space: pre;
    width:       1ch;
}

#main .article .content code {
    font-family: var(--font);
}

#main .article .content figure {
    margin: var(--space-s) 0;
}

#main .article .content .footnotes {
    font-size: small;
    margin:    var(--space-xl) 0 0 35%;

    & ol {
        margin:  0;
        padding: 0;

        & li {
            list-style-position: inside;

            &::marker {
                color: var(--color-markup);
            }

            & p {
                display: inline;
            }
        }
    }
}

#main .article .content .footnotes::before {
    color:   var(--color-markup);
    content: "–––––";
}

#main .article .content .footnotes hr {
    display: none;
}

#main .article .content h2 {
    background: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent 0.05ch,
        currentColor 0.05ch,
        currentColor 0.95ch,
        transparent 0.95ch,
        transparent 1ch
    );
    background-position: 0 100%, 0 calc(100% - 2px);
    background-repeat:   no-repeat;
    background-size:     100% 2px, 100% 2px;
    color:               var(--color-markup);
    display:             table;
    margin:              var(--space-xl) 0 0 0;
}

#main .article .content hr {
    border:     none;
    padding:    var(--space-l) 0 0 0;
    text-align: center;
}

#main .article .content hr::after {
    color:   var(--color-markup);
    content: "✲ ✲ ✲";
}

#main .article .content mark {
    background: var(--color-markup);
}

#main .article .content s,
#main .article .content del {
    text-decoration-color: var(--color-markup);
}

#main .article .content sub,
#main .article .content sup {
    line-height: 1;
}

#main .article .content sub {
    font-feature-settings: "sinf";
}

#main .article .content sup {
    font-feature-settings: "sups";
}

#main .article .content ul {
    margin:  var(--space-s) 0;
    padding: 0 0 0 min(4vw, 4ch);
}

#main .article .content ul ul {
    margin: 0;
}

#main .article .content ul li {
    list-style-type: none;
}

#main .article .content ul li::before {
    color:   var(--color-markup);
    content: "✲";
    margin:  0 1ch 0 0;
}

#main .article .content ol {
    margin:  var(--space-s) 0;
    padding: 0 0 0 8ch;
}

#main .article .content ol ol {
    margin: 0;
}

#main .article .content pre {
    margin: var(--space-s) 0 var(--space-s) min(4vw, 4ch);
}

#main .article .content table {
    margin: var(--space-s) 0;
}

#main .article .content .kg-gallery-image img:hover {
    cursor: zoom-in;
}

/* Gallery cells share the .photo / .photo-print treatment but with a thinner
   white border, smaller corner marks and a wider gap so the framed, slightly
   wobbled prints don't crowd each other. */
#main .article .content .kg-gallery-card {
    --gap: var(--space-s);
    text-align: center;
}

/* Justified rows via grid lanes. The shortcode emits, per row, a
   `grid-template-columns` of one `<aspect-ratio>fr` track per picture. Equal
   aspect-weighted tracks give every image in the row the same height while the
   row fills the full width — so portraits and landscapes sit side by side with
   no cropping and no leftover gaps. */
#main .article .content .kg-gallery-row {
    align-items:     start;
    display:         grid;
    gap:             var(--gap);
    justify-content: center;
    margin:          0;
}

#main .article .content .kg-gallery-row + .kg-gallery-row {
    margin-top: var(--gap);
}

/* Safety net for a future lone-image row: don't blow a single picture up to
   full width (a tall portrait would dominate). Centre it at half width. */
#main .article .content .kg-gallery-row--single {
    grid-template-columns: minmax(0, 0.5fr) !important;
}

#main .article .content .kg-gallery-image {
    --photo-pad: var(--space-3xs);
    --mark-size: var(--space-2xs);
    margin:      0;
}

#main .article .content .kg-gallery-image .photo-print {
    width: 100%;
}

/* Gallery caption sits on a torn piece of cream paper tape — same SVG texture,
   serrated ends, hairline edge, grain, shadow and wobble as the polaroid washi
   tape (drawn by theme.js), only a fixed cream colour and with the handwritten
   caption layered on top. */
#main .article .content .kg-gallery-card > figcaption {
    display:     inline-block;
    font-family: var(--font-handwritten);
    font-size:   small;
    margin:      var(--space-m) 0 var(--space-xs);
    max-width:   80%;
    padding:     var(--space-2xs) var(--space-s);
    position:    relative;
    transform:   rotate(var(--tape-twist, 0deg));
}

#main .article .content .kg-gallery-card > figcaption .label {
    position: relative;
    z-index:  1;
}

.paper-tape {
    filter:         drop-shadow(0px 1px 1.5px rgba(60, 40, 20, 0.18));
    inset:          0;
    overflow:       visible;
    pointer-events: none;
    position:       absolute;
    z-index:        0;
}

/* Article footer */

#main .article .footer {
    grid-column: 1 / -1;
}

#main .article .footer .navigation {
    display:               grid;
    gap:                   var(--space-s);
    grid-template-columns: 1fr 1fr 1fr;
    justify-content:       space-between;
    margin:                var(--space-xl) 0 0 0;
}

#main .article .footer .navigation .all {
    text-align: center;
}

#main .article .footer .navigation .next {
    text-align: right;
}

/* Archives */

#main .archive {
    border-top:      1px dashed var(--color-muted);
    display:         flex;
    gap:             var(--space-s);
    justify-content: space-between;
    padding:         var(--space-2xs) 0;
}

#main .archive:last-of-type {
    border-bottom: 1px dashed var(--color-muted);
}

#main .archive h2 {
    background:    none !important;
    display:       block !important;
    margin:        0 !important;
    overflow:      hidden;
    padding:       0 !important;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

#main .archive .date {
    color:       var(--color-muted);
    flex-shrink: 0;
}

#main .tags h2 {
    margin: var(--space-xl) 0 var(--space-xs) 0 !important;
}

/* Footer */

#footer {
	border-top: 3px solid var(--color-markup);
	font-family: var(--font-sans);
    grid-column: 1 / -1;
    margin:      var(--space-xl) 0 0 0;
    text-align:  center;
}

#footer .navigation {
    margin:         var(--space-xs) 0 0 0;
    text-transform: uppercase;
    width: 100%;
}

#footer .navigation ul {
	display: flex;
		align-items: center;
		flex-flow: row wrap;
		gap: var(--space-s);
		justify-content: center;
    list-style-type: none;
    margin:          0;
    padding:         0;
}

#footer .navigation ul li {
    display: inline;
}

#footer .channels {
	display: flex;
		align-items: center;
		flex-flow: row wrap;
		gap: var(--space-s);
		justify-content: center;
	margin: var(--space-m) 0 0 0;
}

/* GLightbox Overrides */

.gslide-description {
    font-family: var(--font);
}