/* Ten Words Press Teaching. Site chrome and the ricos article template.
   Everything here is class-scoped so it cannot reach into embed articles. */
:root{
  --bg:#823c2e; --bg-dark:#6b3025; --bg-deep:#531f16; --bg-ink:#3d160f;
  --gold:#f0c87a; --gold-deep:#d9a74e;
  --fg:#f4e3dc; --fg-dim:rgba(244,227,220,.74); --rule:rgba(240,200,122,.28);
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --text:'Lora',Georgia,'Times New Roman',serif;
  --label:'Cinzel','Playfair Display',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg-deep) linear-gradient(180deg,var(--bg) 0,var(--bg-deep) 420px) no-repeat;
  color:var(--fg);font-family:var(--text);font-size:19px;line-height:1.7;overflow-x:hidden}
img,video,svg{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:10;background:var(--gold);color:var(--bg-deep);padding:.5rem 1rem}

/* header */
.site-head{border-bottom:1px solid var(--rule)}
.site-head-in{max-width:1180px;margin:0 auto;padding:1.1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:.6rem 1.5rem;flex-wrap:wrap}
.site-brand{font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1.2;color:var(--fg);text-decoration:none}
.site-brand span{color:var(--gold);font-style:italic;font-weight:500}
.site-nav{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;font-size:1rem}
.site-nav a{color:var(--fg-dim);text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--gold)}
.site-head a:focus-visible,.site-foot a:focus-visible,.site-after a:focus-visible,.twp-ricos a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* footer */
.site-foot{border-top:1px solid var(--rule);color:var(--fg-dim);font-size:.95rem}
.site-foot-in{max-width:1180px;margin:0 auto;padding:2rem 1.25rem 3rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem 2rem}
.site-foot p{margin:0}
.site-foot nav{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem}
.site-foot a{color:var(--gold)}

/* article shell shared by both kinds */
.twp-art{position:relative;isolation:isolate;overflow-x:clip;overflow-wrap:break-word}
.twp-art img{max-width:100%;height:auto}
.twp-art .tw-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.twp-art pre{max-width:100%;overflow-x:auto;white-space:pre-wrap}

/* ricos article template: same look as the embed articles */
.twp-ricos{background-color:var(--bg-deep);
  background-image:radial-gradient(ellipse 90% 50% at 50% 0%,#823c2e 0%,transparent 65%),radial-gradient(ellipse 50% 40% at 90% 100%,#6b3025 0%,transparent 60%);
  font-family:var(--text);font-size:19px;line-height:1.75;color:var(--fg)}
.twp-ricos .page{max-width:780px;margin:0 auto;padding:0 1.5rem 4rem}
.twp-ricos .art-head{text-align:center;padding:3rem 0 2.5rem;border-bottom:1px solid rgba(244,227,220,.15);margin-bottom:2.5rem}
.twp-ricos .press-name{font-family:var(--label);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 .6rem}
.twp-ricos .ornament{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0 0 .8rem;color:var(--gold);font-size:.9rem}
.twp-ricos .ornament::before,.twp-ricos .ornament::after{content:"";flex:1;max-width:100px;height:1px;background:linear-gradient(to right,transparent,var(--gold))}
.twp-ricos .ornament::after{background:linear-gradient(to left,transparent,var(--gold))}
.twp-ricos h1{font-family:var(--display);font-weight:900;font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.15;margin:0 0 .7rem;color:var(--fg)}
.twp-ricos .art-sub{font-style:italic;color:var(--fg-dim);font-size:1.1rem;margin:0 0 1rem}
.twp-ricos .art-meta{color:var(--fg-dim);font-size:.95rem;margin:0}
.twp-ricos .art-meta span{color:var(--gold)}
.twp-ricos .art-body h2{font-family:var(--display);font-weight:700;font-size:1.55rem;line-height:1.3;color:var(--gold);
  margin:2.8rem 0 1.1rem;padding-bottom:.5rem;border-bottom:1px solid rgba(244,227,220,.15)}
.twp-ricos .art-body h3{font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.35;color:var(--fg);margin:2rem 0 .8rem}
.twp-ricos .art-body h4,.twp-ricos .art-body h5,.twp-ricos .art-body h6{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--gold);margin:1.6rem 0 .6rem}
.twp-ricos .art-body h1{font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1.25;margin:2.6rem 0 1rem}
.twp-ricos .art-body p{margin:0 0 1.2rem}
.twp-ricos .art-body a{color:var(--gold)}
.twp-ricos .art-body strong{color:#fbeee6}
.twp-ricos .art-body ul,.twp-ricos .art-body ol{margin:0 0 1.3rem;padding-left:1.5rem}
.twp-ricos .art-body li{margin:0 0 .45rem}
.twp-ricos .art-body li p{margin:0}
.twp-ricos .art-body blockquote{margin:1.8rem 0;padding:1.1rem 1.4rem;border-left:3px solid var(--gold);
  background:rgba(83,31,22,.6);font-style:italic;color:#f8ebe4}
.twp-ricos .art-body blockquote p:last-child{margin-bottom:0}
.twp-ricos .art-body figure{margin:2rem 0}
.twp-ricos .art-body figure img{display:block;margin:0 auto;border-radius:3px;box-shadow:0 18px 26px -14px rgba(0,0,0,.7)}
.twp-ricos .art-body figcaption{text-align:center;font-size:.92rem;font-style:italic;color:var(--fg-dim);margin-top:.6rem}
.twp-ricos .art-body table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1.5rem 0}
.twp-ricos .art-body td,.twp-ricos .art-body th{border:1px solid rgba(244,227,220,.18);padding:.55rem .7rem;vertical-align:top}
.twp-ricos .art-body tr:first-child td{background:rgba(83,31,22,.7);color:var(--gold);font-weight:600}
.twp-ricos .art-end{text-align:center;color:var(--gold);letter-spacing:.5em;margin:3rem 0 0}

/* reads and likes under the title (inside embed articles too, so the selector is strong) */
.twp-art p.twp-stats{font-family:var(--text);font-size:.95rem;font-style:normal;font-weight:400;line-height:1.5;
  letter-spacing:normal;text-transform:none;text-align:center;color:var(--fg-dim);margin:.9rem 0 0;padding:0;border:0;background:none;
  min-height:1.5em;opacity:0;transition:opacity .3s ease}
.twp-art p.twp-stats.is-ready{opacity:1}

/* like button */
.like-box{text-align:center;margin:0 0 2.4rem}
.like-btn{font:inherit;font-size:1.05rem;font-weight:600;display:inline-flex;align-items:center;gap:.55rem;
  color:var(--gold);background:transparent;border:1px solid var(--gold);border-radius:999px;padding:.6rem 1.4rem;cursor:pointer;line-height:1.3}
.like-btn svg{fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s ease}
.like-btn:hover{background:rgba(240,200,122,.12)}
.like-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.like-btn[aria-pressed="true"]{background:var(--gold);color:var(--bg-deep)}
.like-btn[aria-pressed="true"] svg{fill:currentColor;transform:scale(1.08)}
.like-btn:disabled{opacity:.6;cursor:default}
.like-n:empty{display:none}
.like-n{font-weight:400;opacity:.85}
.like-follow{margin:.9rem 0 0;font-size:1.02rem}
.like-follow a{color:var(--gold)}

/* read further (books) and keep reading (related) */
.further,.related{margin:0 0 2.6rem}
.further h2,.related h2{font-family:var(--display);font-weight:800;font-size:1.6rem;margin:0 0 1.1rem}
.further-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1.4rem}
.further-list a{display:flex;flex-direction:column;gap:.6rem;width:150px;text-decoration:none;color:var(--fg)}
.further-list img{display:block;width:150px;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:2px 4px 4px 2px;box-shadow:0 14px 20px -10px rgba(0,0,0,.75);transition:transform .2s ease}
.further-list span{font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.3}
.further-list a:hover img{transform:translateY(-4px)}
.further-list a:hover span{color:var(--gold)}
.further-list a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.grid.related-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.related-grid .card-title{font-size:1.08rem}
.related-grid .card-excerpt{-webkit-line-clamp:3;font-size:.93rem}
@media (max-width:600px){
  .further-list a{width:120px}
  .further-list img{width:120px}
  .grid.related-grid{grid-template-columns:minmax(0,1fr)}
}

/* comments */
.comments{margin:3rem 0 0;padding-top:2.2rem;border-top:1px solid var(--rule)}
.comments h2{font-family:var(--display);font-weight:800;font-size:1.7rem;margin:0 0 1.2rem}
.c-count{color:var(--fg-dim);font-weight:400;font-size:1.1rem}
.c-form{display:grid;gap:1rem;margin:0 0 2.2rem}
.c-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.c-field{display:grid;gap:.35rem;font-size:1rem}
.c-field small{color:var(--fg-dim);font-size:.85rem;margin-left:.3rem}
.c-field input,.c-field textarea{width:100%;font:inherit;font-size:1rem;color:var(--fg);background:rgba(61,22,15,.65);
  border:1px solid var(--rule);border-radius:6px;padding:.65rem .85rem}
.c-field textarea{resize:vertical;min-height:7.5rem;line-height:1.55}
.c-field input:focus,.c-field textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.c-check{display:flex;gap:.6rem;align-items:center;font-size:1rem;cursor:pointer}
.c-check input{width:1.15rem;height:1.15rem;accent-color:var(--gold)}
.c-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.c-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem}
.c-submit{font:inherit;font-size:1.02rem;font-weight:700;background:var(--gold);color:var(--bg-deep);border:0;border-radius:4px;padding:.7rem 1.4rem;cursor:pointer}
.c-submit:hover{background:#f6d596}
.c-submit:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.c-submit:disabled{opacity:.6;cursor:default}
.c-note{margin:0;color:var(--fg-dim);font-size:.92rem}
.c-status{margin:0;min-height:1.4em;font-size:1rem}
.c-status.is-ok{color:var(--gold)}
.c-status.is-error{color:#ffb4a2}
.c-list{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.c-item{padding:1.1rem 1.3rem;background:rgba(61,22,15,.45);border:1px solid rgba(240,200,122,.16);border-radius:6px}
.c-meta{margin:0 0 .5rem;font-size:.95rem}
.c-name{font-weight:700;color:var(--gold)}
.c-date{color:var(--fg-dim);margin-left:.4rem}
.c-body p{margin:0 0 .7rem;overflow-wrap:anywhere}
.c-body p:last-child{margin-bottom:0}
.c-empty{color:var(--fg-dim);margin:0}
@media (max-width:560px){ .c-row{grid-template-columns:1fr} }

/* admin */
.admin{max-width:900px;margin:0 auto;padding:2.2rem 1.25rem 4rem}
.a-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem}
.a-head h1{font-family:var(--display);font-weight:800;font-size:2.2rem;margin:0}
.a-who{margin:0;color:var(--fg-dim);font-size:.95rem}
.a-banner{margin:1.2rem 0 0;padding:.9rem 1.1rem;border:1px solid var(--gold);border-radius:6px;background:rgba(240,200,122,.1)}
.a-banner.is-error{border-color:#ffb4a2;color:#ffb4a2;background:rgba(255,180,162,.08)}
.a-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 1.4rem}
.a-tab{font:inherit;font-size:1rem;color:var(--gold);background:transparent;border:1px solid var(--gold);border-radius:999px;padding:.35rem 1.1rem;cursor:pointer}
.a-tab[aria-selected="true"]{background:var(--gold);color:var(--bg-deep);font-weight:600}
.a-n{opacity:.8;margin-left:.2rem}
.a-list{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.a-item{padding:1.1rem 1.3rem;background:rgba(61,22,15,.55);border:1px solid rgba(240,200,122,.18);border-radius:6px}
.a-item.is-focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(240,200,122,.35)}
.a-art{margin:0 0 .3rem;font-family:var(--display);font-weight:700;font-size:1.1rem}
.a-art a,.a-meta a{color:var(--gold)}
.a-meta{margin:0 0 .7rem;font-size:.95rem;overflow-wrap:anywhere}
.a-date{color:var(--fg-dim)}
.a-tag{display:inline-block;font-size:.8rem;color:var(--bg-deep);background:var(--gold);border-radius:3px;padding:0 .4rem;margin-left:.3rem}
.a-body{white-space:normal;overflow-wrap:anywhere;margin:0 0 .9rem;line-height:1.6}
.a-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.a-btn{font:inherit;font-size:.95rem;font-weight:600;color:var(--gold);background:transparent;border:1px solid var(--gold);border-radius:4px;padding:.4rem 1rem;cursor:pointer}
.a-btn:disabled{opacity:.5}
.a-approve{background:var(--gold);color:var(--bg-deep)}
.a-delete{color:#ffb4a2;border-color:#ffb4a2}
.a-none{color:var(--fg-dim);padding:1rem 0}
.a-signin h1{font-family:var(--display);font-size:2rem;margin:0 0 .8rem}
.a-signin a{color:var(--gold)}

/* after the article */
.site-after{max-width:820px;margin:0 auto;padding:3rem 1.25rem 3.5rem}
.discuss{margin:2rem 0 0;text-align:center;font-size:1.05rem}
.discuss a{color:var(--gold)}

/* free study offer box (section A) */
.offer{display:grid;grid-template-columns:1fr 150px;gap:1.6rem;align-items:center;
  background:linear-gradient(135deg,#6b3025,#531f16);border:1px solid rgba(240,200,122,.35);border-left:4px solid #f0c87a;
  border-radius:6px;padding:1.6rem 1.7rem}
.offer-label{font-family:var(--label);font-variant:small-caps;font-size:1rem;letter-spacing:.08em;color:#f0c87a;margin:0 0 .3rem}
.offer-title{font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,4vw,2.1rem);line-height:1.12;margin:0 0 .7rem;color:var(--fg)}
.offer-title em{color:#f0c87a;font-style:italic}
.offer-text{margin:0 0 1.1rem;font-size:1.02rem;line-height:1.6}
.offer-btn{display:inline-block;background:#f0c87a;color:#531f16;font-family:var(--text);font-weight:700;font-size:1.02rem;
  text-decoration:none;padding:.7rem 1.4rem;border-radius:4px}
.offer-btn:hover{background:#f6d596}
.offer-fine{margin:.7rem 0 0;font-size:.88rem;color:var(--fg-dim)}
.offer-cover{display:block;width:150px}
.offer-cover img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:2px 4px 4px 2px;box-shadow:0 14px 20px -10px rgba(0,0,0,.75)}

/* article index */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.index{max-width:1180px;margin:0 auto;padding:0 1.25rem 4rem}
.index-head{max-width:44rem;padding:2.6rem 0 1.4rem}
.index-head h1{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5.5vw,3.4rem);line-height:1.08;margin:0 0 .7rem}
.index-head p{margin:0;color:var(--fg-dim);font-size:1.08rem}
.tools{display:flex;gap:.8rem 1rem;flex-wrap:wrap;align-items:center;margin:0 0 1rem}
.search{flex:1 1 320px}
.search input{width:100%;font:inherit;font-size:1.05rem;color:var(--fg);background:rgba(61,22,15,.65);
  border:1px solid var(--rule);border-radius:6px;padding:.7rem 1rem;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:rgba(244,227,220,.55)}
.search input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.sort{display:flex;align-items:center;gap:.5rem;color:var(--fg-dim);font-size:1rem}
.sort select{font:inherit;font-size:1rem;color:var(--fg);background:rgba(61,22,15,.65);border:1px solid var(--rule);border-radius:6px;padding:.6rem .8rem}
.sort select:focus{outline:2px solid var(--gold);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;padding:.4rem 0 1.2rem}
.chip{font:inherit;font-size:.98rem;color:var(--gold);background:transparent;border:1px solid var(--gold);border-radius:999px;padding:.3rem 1rem;cursor:pointer;line-height:1.4}
.chip:hover{background:rgba(240,200,122,.12)}
.chip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.chip[aria-pressed="true"]{background:var(--gold);color:var(--bg-deep);font-weight:600}
.chip-n{opacity:.75;font-size:.88em;margin-left:.15rem}
.count{color:var(--fg-dim);font-size:.95rem;margin:0 0 1.2rem;padding-top:1rem;border-top:1px solid var(--rule)}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2.4rem 1.8rem}
.card[hidden]{display:none}
.card a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--fg)}
.card a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.card-cover{display:block;aspect-ratio:1/1;background:#2a0f0a;border:1px solid rgba(240,200,122,.18);border-radius:3px;overflow:hidden;box-shadow:0 14px 18px -10px rgba(0,0,0,.7);transition:transform .2s ease}
.card-cover img{display:block;width:100%;height:100%;object-fit:cover}
.card-blank{height:100%;display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--gold);line-height:1.2}
.card a:hover .card-cover{transform:translateY(-4px)}
.card-text{display:flex;flex-direction:column;gap:.3rem;padding-top:.95rem}
.card-topic{color:var(--gold);font-size:.88rem;font-weight:600;letter-spacing:.02em}
.card-title{font-family:var(--display);font-weight:700;font-size:1.22rem;line-height:1.28;overflow-wrap:break-word}
.card a:hover .card-title{color:var(--gold)}
.card-date{color:var(--fg-dim);font-size:.9rem}
.card-stats:empty{display:none}
.card-excerpt{font-size:.97rem;line-height:1.55;color:rgba(244,227,220,.86);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.empty{text-align:center;padding:3rem 0}
.empty p{margin:0 0 .6rem;font-size:1.15rem}
.empty a{color:var(--gold)}
@media (max-width:600px){
  .index{padding:0 1rem 3rem}
  .index-head{padding:2rem 0 1.1rem}
  .grid{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .card a{flex-direction:row;gap:1rem;align-items:flex-start}
  .card-cover{flex:0 0 108px;width:108px}
  .card a{min-width:0}
  .card-text{padding-top:0;min-width:0}
  .card-title{font-size:1.1rem}
  .card-excerpt{-webkit-line-clamp:3;font-size:.93rem}
  .sort{width:100%}
  .sort select{flex:1}
}

/* simple pages (404, topics list) */
.simple{max-width:820px;margin:0 auto;padding:3rem 1.25rem 4rem}
.simple h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,2.8rem);line-height:1.15;margin:0 0 1rem}
.simple a{color:var(--gold)}
.topic-list{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.6rem}
.topic-list a{font-family:var(--display);font-size:1.25rem;text-decoration:none}
.topic-list span{color:var(--fg-dim);font-size:1rem;margin-left:.5rem}

@media (max-width:720px){
  .site-brand{font-size:1.2rem}
  .twp-ricos .page{padding:0 1.1rem 3rem}
  .twp-ricos .art-head{padding:2.2rem 0 1.8rem}
  .twp-ricos .art-body blockquote{padding:1rem 1.1rem}
}
@media (max-width:480px){
  .site-head-in{padding:.9rem 1rem}
  .site-nav{font-size:.9rem;gap:.25rem .9rem}
}
@media (max-width:560px){
  .offer{grid-template-columns:1fr;padding:1.4rem 1.2rem}
  .offer-cover{width:110px;grid-row:1}
}