/* Learn — the room's shared styles. Type law from /css/tokens.css:
   Fraunces for prose and headings (italic display cut on h1/h2),
   JetBrains Mono for eyebrows, labels and templates. */

.wrap{max-width:700px;margin:0 auto;padding:56px 28px 110px;position:relative;z-index:2}
.wrap.wide{max-width:960px}

.masthead{margin-top:24px}
.masthead h1{font-family:var(--serif);font-style:italic;font-weight:var(--weight-display);font-size:var(--text-h1);line-height:var(--leading-heading);margin:16px 0 0}
.dek{font-family:var(--serif);color:var(--parchment-dim);font-size:var(--text-lead);line-height:1.6;margin:20px 0 0}
.byline{font-family:var(--mono);font-size:var(--text-label);letter-spacing:.1em;color:var(--faint);margin-top:22px;text-transform:uppercase}

/* Article body */
article{margin-top:40px}
article h2{font-family:var(--serif);font-style:italic;font-weight:var(--weight-heading);font-size:var(--text-h2);line-height:var(--leading-heading);color:var(--parchment);margin:52px 0 14px}
article h3{font-family:var(--serif);font-weight:var(--weight-heading);font-size:var(--text-h3);color:var(--parchment);margin:32px 0 10px}
article p,article li{font-family:var(--serif);font-size:var(--text-body);line-height:1.72;color:var(--parchment)}
article p{margin:0 0 20px}
article ol,article ul{margin:0 0 22px;padding-left:1.4em}
article li{margin:0 0 10px}
article strong{color:var(--parchment);font-weight:600}
article a{color:var(--ember)}
article a:hover{color:var(--ember-bright,#f09048)}
article code{font-family:var(--mono);font-size:.86em;color:var(--brass);background:rgba(201,168,106,.07);padding:1px 5px;border-radius:3px}
blockquote{margin:30px 0;padding:4px 0 4px 22px;border-left:2px solid var(--brass);font-family:var(--serif);font-style:italic;color:var(--parchment-dim);font-size:var(--text-lead);line-height:1.6}

/* "You leave with" — the lesson's promise, set before the body */
.takeaway{margin:34px 0 0;padding:18px 22px;border:1px solid var(--color-border-hover);border-radius:6px;background:rgba(42,31,20,.45)}
.takeaway .label{font-family:var(--mono);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--brass);margin:0 0 10px}
.takeaway ul{margin:0;padding-left:1.2em}
.takeaway li{font-family:var(--serif);font-size:var(--text-small);line-height:1.6;color:var(--parchment-dim);margin:0 0 6px}

/* Templates the reader copies */
.template{margin:26px 0 30px}
.template .label{font-family:var(--mono);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--brass);margin:0 0 8px}
.template pre{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--parchment);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:6px;padding:16px 18px;margin:0;overflow-x:auto;white-space:pre}

/* Small tables */
.t-table{width:100%;border-collapse:collapse;margin:22px 0 28px;font-size:var(--text-small)}
.t-table th,.t-table td{border:1px solid rgba(201,168,106,.18);padding:9px 12px;text-align:left;vertical-align:top;font-family:var(--serif);color:var(--parchment)}
.t-table th{font-family:var(--mono);font-size:var(--text-label);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:400}
.t-scroll{overflow-x:auto}

.endmark{text-align:center;color:var(--brass);margin:54px 0 0;font-size:20px}
.foot{margin-top:46px;font-family:var(--mono);font-size:var(--text-label);letter-spacing:.06em;color:var(--faint);display:flex;gap:20px;flex-wrap:wrap}
.foot a{color:var(--faint);display:inline-block;padding:6px 0}
.foot a:hover{color:var(--brass)}

/* Index: the room landing (frame from /css/rooms.css) */
.start{margin-top:8px;padding:22px 24px 24px;border:1px solid var(--color-border);border-radius:14px;
  background:linear-gradient(135deg,rgba(138,168,107,.07),transparent 55%),var(--surface-card);box-shadow:var(--shadow-raised)}
.start h2{font-family:var(--mono);font-style:normal;font-weight:400;font-size:var(--text-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--moss);margin:0 0 14px}
.start ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.start a{display:flex;flex-direction:column;gap:8px;height:100%;padding:14px 14px 16px;border:1px solid var(--color-border);border-radius:10px;
  background:rgba(28,21,16,.6);transition:border-color var(--transition-fast),background var(--transition-fast),transform var(--transition-fast)}
.start a:hover,.start a:focus-visible{border-color:var(--moss);background:rgba(138,168,107,.08)}
.start .w{font-family:var(--mono);font-size:var(--text-label);letter-spacing:.14em;color:var(--moss)}
.start .s{font-family:var(--serif);font-size:var(--text-small);line-height:1.4;color:var(--parchment)}

.mcards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.mcard{grid-column:span 2;position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;overflow:hidden;
  border:1px solid var(--color-border);border-radius:14px;background:var(--surface-card),var(--color-bg-elevated);box-shadow:var(--shadow-raised);
  scroll-margin-top:96px;transition:border-color var(--transition-base),box-shadow var(--transition-base)}
.mcard:nth-child(-n+2){grid-column:span 3}
.mcard .num{position:absolute;top:-14px;right:10px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:6.5rem;line-height:1;
  color:rgba(201,168,106,.08);transition:color var(--transition-base),transform 700ms var(--ease-organic);pointer-events:none}
.mcard:hover,.mcard:focus-visible,.mcard:target{border-color:var(--brass);box-shadow:var(--shadow-float)}
.mcard:target{border-color:var(--moss)}
.mcard:hover .num{color:rgba(232,131,58,.2);transform:translateY(4px)}
.mcard .kind,.pcard .kind,.card .kind{font-family:var(--mono);font-size:var(--text-label);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.mcard .kind .new{color:var(--ember);margin-left:8px}
.mcard h3,.pcard h3,.card h3{font-family:var(--serif);font-weight:var(--weight-heading);font-size:var(--text-h3);line-height:1.25;color:var(--parchment);margin:4px 0 2px}
.mcard:nth-child(-n+2) h3{font-style:italic;font-size:1.75rem}
.mcard p,.pcard p,.card p{font-family:var(--serif);font-size:var(--text-small);line-height:1.55;color:var(--parchment-dim);margin:0;max-width:54ch}
.mcard .learn,.pcard .learn,.card .learn{display:block;font-family:var(--mono);font-size:var(--text-caption);color:var(--ember);margin-top:auto;padding-top:12px}

.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pcard{display:flex;flex-direction:column;gap:8px;padding:0 0 22px;overflow:hidden;border:1px solid var(--color-border);border-radius:14px;
  background:var(--surface-card),var(--color-bg-elevated);box-shadow:var(--shadow-raised);transition:border-color var(--transition-base),box-shadow var(--transition-base)}
.pcard>:not(.thumb){padding:0 20px}
.pcard .thumb{display:block;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--color-border);margin-bottom:8px;line-height:0}
.pcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-organic)}
.pcard:hover,.pcard:focus-visible{border-color:var(--brass);box-shadow:var(--shadow-float)}
.pcard:hover .thumb img{transform:scale(1.05)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px;border:1px solid var(--color-border);border-radius:12px;
  background:var(--surface-card),var(--color-bg-elevated);box-shadow:var(--shadow-raised);transition:border-color var(--transition-base),box-shadow var(--transition-base)}
a.card:hover,a.card:focus-visible{border-color:var(--brass);box-shadow:var(--shadow-float)}

@media(max-width:900px){
  .start ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mcards{grid-template-columns:1fr 1fr}
  .mcard,.mcard:nth-child(-n+2){grid-column:span 1}
  .mcard:first-child{grid-column:1/-1}
  .pcards{grid-template-columns:1fr}
  .pcard{display:grid;grid-template-columns:minmax(0,200px) 1fr;column-gap:0;padding:0}
  .pcard .thumb{grid-row:1 / span 4;height:100%;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--color-border);margin:0}
  .pcard>:not(.thumb){padding:0 18px}
  .pcard .kind{padding-top:16px!important}.pcard .learn{padding-bottom:16px!important}
}
@media(max-width:600px){
  .start ul,.mcards,.cards.two{grid-template-columns:1fr}
  .pcard{display:flex;padding-bottom:20px}
  .pcard .thumb{aspect-ratio:16/10;border-right:0;border-bottom:1px solid var(--color-border)}
}

@media(max-width:560px){
  .wrap{padding:40px 16px 80px}
  article p,article li{font-size:16.5px}
  .template pre{font-size:12px;padding:14px}
}