/*
Theme Name: SINS
Theme URI: https://sayitsnotso.com
Author: SINS
Author URI: https://sayitsnotso.com
Description: Essay-first theme. Home is Wren's "Still Lifes, Marked Up": the paragraph beside three category plates, the newest essay large, the shelf with a picture and summary line per essay. One warm-gray duotone on every picture, a highlighter under "Not So" as the one ornament, light and dark with a reader's switch. Self-hosted fonts, nothing loaded from another server, no comments, no share buttons.
Version: 1.1.0
Update URI: false
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sins
*/

/* ==========================================================================
   Fonts -- self-hosted, all under the SIL Open Font License (assets/fonts).
   ========================================================================== */

@font-face{font-family:"Source Serif";src:url(assets/fonts/source-serif-4-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Serif";src:url(assets/fonts/source-serif-4-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif";src:url(assets/fonts/source-serif-4-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Source Serif";src:url(assets/fonts/source-serif-4-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Public Sans";src:url(assets/fonts/public-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Public Sans";src:url(assets/fonts/public-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

/* ==========================================================================
   Tokens

   Light is the written default. Dark arrives from the reader's device, or
   from the switch in the masthead (data-theme on <html>, remembered in this
   browser). The two dark blocks are deliberately identical: one answers the
   device, the other the reader, and the reader wins because
   :root[data-theme="dark"] also matches when the device says light.

   The amber is the highlighter: only ever BEHIND ink, never as text. As text
   it is --mark-ink, the text-safe amber for category labels.
   ========================================================================== */

:root{
  color-scheme:light;
  --paper:#F2F0EB; --paper-2:#E9E6DF; --ink:#1C1B19; --soft:#5E5A54; --rule:#D8D4CB;
  --mark:#F0C24B;          /* the highlighter */
  --hl:var(--mark);        /* the highlighter as drawn (softer in dark) */
  --mark-ink:#8A5A00;      /* text-safe amber for labels, 5.2:1 on paper */
  --duo:grayscale(1) sepia(.22) contrast(1.04) brightness(.98);
  --display:"Instrument Serif",Georgia,serif; --serif:"Source Serif",Georgia,serif; --sans:"Public Sans",system-ui,sans-serif;
  --measure:680px; --side:15rem; --side-gap:2.5rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#151412; --paper-2:#1D1B19; --ink:#ECE7DE; --soft:#A39C91; --rule:#2F2C28;
    --mark:#C99A2E; --hl:color-mix(in srgb,#C99A2E 55%,transparent); --mark-ink:#E8B84A;
    --duo:grayscale(1) sepia(.28) contrast(1.02) brightness(.78);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#151412; --paper-2:#1D1B19; --ink:#ECE7DE; --soft:#A39C91; --rule:#2F2C28;
  --mark:#C99A2E; --hl:color-mix(in srgb,#C99A2E 55%,transparent); --mark-ink:#E8B84A;
  --duo:grayscale(1) sepia(.28) contrast(1.02) brightness(.78);
}

/* ==========================================================================
   Base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.6;overflow-x:hidden;font-kerning:normal;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}
body > .wrap{width:100%}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img,video{display:block;max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

.screen-reader-text{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{position:static !important;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;display:inline-block;padding:.5rem 20px;font:14px/1.3 var(--sans)}

/* the highlighter swipe: an editor's mark, the site's one ornament */
.hl{background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 92%,transparent 92%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ==========================================================================
   Masthead
   ========================================================================== */

.mast{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:28px 0 18px;border-bottom:1px solid var(--rule)}
.name{font-family:var(--display);font-weight:400;font-size:60px;line-height:.95;letter-spacing:-.01em}
.name small{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.22em;color:var(--soft);margin-left:12px;vertical-align:.9em}
.mast.small{padding:20px 0 14px}
.mast.small .name{font-size:40px}
.nav{display:flex;align-items:center;gap:26px;font-family:var(--sans);font-size:15px;padding-bottom:8px}
.nav ul{display:flex;gap:26px;margin:0;padding:0;list-style:none}
.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--mark)}
.nav a:hover{box-shadow:inset 0 -2px 0 var(--rule)}
.nav a[aria-current]:hover{box-shadow:inset 0 -2px 0 var(--mark)}

/* the Dark/Light switch: hidden until the script that runs it has loaded */
.theme-switch{display:none;font:600 13px/1 var(--sans);letter-spacing:.02em;color:var(--soft);background:none;border:1px solid var(--rule);border-radius:999px;padding:6px 12px;min-height:30px;cursor:pointer}
.sins-js .theme-switch{display:inline-flex;align-items:center}
.theme-switch:hover{color:var(--ink);border-color:var(--soft)}

/* ==========================================================================
   Home
   ========================================================================== */

.hero{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center;padding:40px 0 44px;border-bottom:1px solid var(--rule)}
.intro{font-size:27px;line-height:1.42}
.intro p + p{margin-top:.6em}
.collage{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:10px;aspect-ratio:16/10}
.plate{position:relative;overflow:hidden;background:var(--paper-2)}
.plate:first-child{grid-row:span 2}
.plate img{width:100%;height:100%;object-fit:cover;filter:var(--duo);transition:transform .4s ease}
.plate:hover img{transform:scale(1.02)}
.plate span{position:absolute;left:10px;bottom:10px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;background:var(--paper);color:var(--ink);padding:5px 10px}
.plate span:after{content:" \2192";color:var(--mark-ink)}
@media (prefers-reduced-motion:reduce){.plate img{transition:none}}

.label{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin:38px 0 16px}
.kick{display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mark-ink)}
.meta{font-family:var(--sans);font-size:14px;color:var(--soft);margin-top:10px}
.meta b{font-weight:600;color:var(--ink);letter-spacing:.06em}
.dek{color:var(--soft);margin-top:8px}

/* the newest essay leads the shelf */
.lead{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
.lead .ph{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
.lead .ph img{width:100%;height:100%;object-fit:cover;filter:var(--duo)}
.lead h3{font-size:44px;line-height:1.08;font-weight:700;letter-spacing:-.01em;margin:10px 0 4px}
.lead .dek{font-size:20px}
.read{display:inline-block;margin-top:18px;font-family:var(--sans);font-size:15px;font-weight:600}
.read .hl{padding:0 .15em}

/* the shelf */
.shelf{list-style:none;margin:10px 0 0;padding:0}
.shelf li{display:grid;grid-template-columns:176px 1fr;gap:26px;padding:22px 0;border-top:1px solid var(--rule)}
.shelf .th{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
.shelf .th img{width:100%;height:100%;object-fit:cover;filter:var(--duo)}
.shelf h3{font-size:26px;line-height:1.2;font-weight:600;margin-top:4px}
.shelf h3 a:hover,.lead h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.shelf .dek{font-size:18px}

.write{margin-top:44px;padding:26px 0;border-top:1px solid var(--rule);font-size:20px}
.write a{box-shadow:inset 0 -.35em 0 var(--hl)}
/* the footer carries the closing rule on every page (on home and essays it sits right under Write to SINS) */
.foot{display:flex;justify-content:space-between;gap:10px 18px;font-family:var(--sans);font-size:14px;color:var(--soft);padding:26px 0 44px;border-top:1px solid var(--rule)}
.foot nav{display:flex;gap:18px}
.foot a:hover{color:var(--ink)}

/* archives: a category or date list, the same shelf */
.archive{padding-bottom:56px}
.archive .kick{margin-top:40px}
.archive h1{font-size:40px;line-height:1.1;font-weight:700;margin:6px 0 10px}
.archive h1:first-child{margin-top:40px}
.archive > p{margin-top:28px;font-family:var(--sans);font-size:15px}
.archive > p a{box-shadow:inset 0 -2px 0 var(--mark)}
.pagination{font:14px/1.3 var(--sans);margin:20px 0}
.pagination .page-numbers{margin-right:.75rem}

/* ==========================================================================
   Reading: essays and standing pages. The column is the product.
   ========================================================================== */

.col{width:min(var(--measure),100% - 40px);margin-inline:auto}
.essay .col,main > .col{padding-top:44px}
.essay h1,main > .col h1{font-size:46px;line-height:1.08;font-weight:700;letter-spacing:-.01em;margin:12px 0 8px}
main > .col{padding-bottom:64px}
main > .col h1{margin:0 0 24px}
.byline{margin:0 0 30px}

.entry-content{overflow-wrap:break-word}
.entry-content > * + *{margin-top:1.1em}
.entry-content h2,.entry-content h3,.entry-content h4{line-height:1.25;margin-top:2em;font-weight:700}
.entry-content h2{font-size:1.3em}
.entry-content h3{font-size:1.1em}
.entry-content a{text-decoration:underline;text-decoration-color:var(--mark-ink);text-decoration-thickness:1px;text-underline-offset:.15em}
.entry-content a:hover{text-decoration-thickness:2px}
.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content li + li{margin-top:.35em}
.entry-content blockquote{padding:0 0 0 1.1em;border-left:2px solid var(--rule)}
.entry-content blockquote cite{display:block;font-size:.9em;color:var(--soft);font-style:normal}
.entry-content hr,.entry-content .wp-block-separator{border:0;border-top:1px solid var(--rule);margin:2.5em auto;width:30%}
.entry-content figure,.entry-content .wp-block-image{margin:30px 0}
.entry-content figure img{width:100%}
.entry-content figcaption{font:14px/1.4 var(--sans);color:var(--soft);margin-top:.5em}
.entry-content table{border-collapse:collapse;width:100%;font-size:.9em}
.entry-content th,.entry-content td{border-bottom:1px solid var(--rule);padding:.4em .5em;text-align:left}
.intro a{text-decoration:underline;text-decoration-color:var(--mark-ink);text-underline-offset:.15em}

/* notes: one set, two layouts (see sins_sidenotes()) */
.entry-content sup.fn{line-height:0;font-size:.72em}
.entry-content sup.fn a{color:var(--soft);text-decoration:none;padding-inline:.1em}
.entry-content sup.fn a:hover{color:var(--ink);text-decoration:underline}
.sidenote{display:none}
.entry-content .wp-block-footnotes{margin-top:3em;padding-top:1.25em;border-top:1px solid var(--rule);font-size:.85em;line-height:1.5}
.entry-content .wp-block-footnotes li{margin-bottom:.6em}
.entry-content .wp-block-footnotes a[href*="-link"]{text-decoration:none;color:var(--soft)}
@media (min-width:72rem){
  /* Move the column left so the margin has room for a note -- only on an
     essay that has notes. */
  body.has-notes .col{margin-left:max(20px,calc((100% - var(--measure) - var(--side) - var(--side-gap)) / 2));margin-right:auto}
  .sidenote{display:block;float:right;clear:right;width:var(--side);margin:.25em calc(-1 * (var(--side) + var(--side-gap))) .9em 0;font-family:var(--sans);font-size:.7em;line-height:1.5;color:var(--soft)}
  .sidenote-num{font-variant-numeric:tabular-nums;color:var(--ink);margin-right:.3em}
  .sidenote a{color:var(--soft)}
  .entry-content sup.fn a{pointer-events:none}
  .entry-content .wp-block-footnotes{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
}

/* after an essay: more from the shelf, then the way to write in */
.after{margin-top:56px}
.more .label{margin-top:0}
.more .shelf li{grid-template-columns:120px 1fr;gap:20px;padding:16px 0}
.more .shelf h3{font-size:21px}
.more .shelf .dek{font-size:17px}
.after .write{font-size:19px}
.after .write .label{margin:0 0 10px}
.after .write p + p{margin-top:.6em}

/* ==========================================================================
   The private form (Write to SINS). The plugin's own stylesheet is not
   loaded; this is its only styling.
   ========================================================================== */

.sf-form{margin:2rem 0 2.5rem}
.sf-form .sf-title{font-size:1.25em;margin:0 0 .8em}
.sf-form .sf-field{margin:0 0 1.1em}
.sf-form label{display:block;font:14px/1.3 var(--sans);color:var(--soft);margin-bottom:.35em}
.sf-form input[type="text"],.sf-form input[type="email"],.sf-form textarea{width:100%;padding:.55em .65em;font:inherit;font-size:.9em;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:2px}
.sf-form input:focus,.sf-form textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.sf-form textarea{min-height:10em;resize:vertical}
.sf-form button{font:600 15px/1 var(--sans);padding:.8em 1.4em;color:var(--paper);background:var(--ink);border:1px solid var(--ink);border-radius:2px;cursor:pointer}
.sf-form button:hover,.sf-form button:focus-visible{background:var(--soft);border-color:var(--soft)}
.sf-form .sf-hp,.sf-form .sf-hidden{display:none}
.sf-notice{padding:.8em 1em;border-left:2px solid var(--ink);font:15px/1.45 var(--sans);margin-bottom:1.5rem}

/* ==========================================================================
   Phone
   ========================================================================== */

@media (max-width:760px){
  body{font-size:18px}
  .mast,.mast.small{flex-direction:column;align-items:flex-start;gap:10px;padding:20px 0 14px}
  .name{font-size:42px}
  .mast.small .name{font-size:34px}
  .nav,.nav ul{gap:20px}
  .nav{width:100%;padding:0}
  .theme-switch{margin-left:auto}
  .hero{grid-template-columns:1fr;gap:22px;padding:24px 0 30px}
  .intro{font-size:21px}
  .collage{aspect-ratio:3/2}
  .plate span{font-size:12px;left:8px;bottom:8px;padding:4px 8px}
  .lead{grid-template-columns:1fr;gap:16px}
  .lead h3{font-size:32px}
  .lead .dek{font-size:18px}
  .shelf li,.more .shelf li{grid-template-columns:96px 1fr;gap:16px;padding:18px 0}
  .shelf .th{aspect-ratio:1}
  .shelf h3,.more .shelf h3{font-size:20px}
  .shelf .dek,.more .shelf .dek{font-size:16px;grid-column:1 / -1;margin-top:0}
  .shelf .txt{display:contents}
  .shelf .head{grid-column:2}
  .foot{flex-direction:column}
  .essay h1,main > .col h1{font-size:34px}
  .archive h1{font-size:32px}
}