@import url('/drinkdrink-case/case-base.css');

/* Project Detail Design tokens on the markdown case shell */
.markdown-content{font-family:var(--font-sans);color:#3C3C36;font-size:1rem;line-height:1.625;overflow-wrap:anywhere;}
.markdown-content h1{margin:0;font-family:var(--font-sans);font-size:clamp(2rem,5vw,3rem);line-height:1.2;font-weight:700;letter-spacing:-.03em;color:#2F2F2B;font-variation-settings:"wdth" 120;}
.markdown-content .case-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.85rem 0 0;padding:0;list-style:none;}
.markdown-content .case-tags li{font-family:var(--font-mono-2);font-size:.75rem;text-transform:uppercase;color:var(--label-2);border:1px solid var(--line);padding:.25rem .5rem;}
.markdown-content>hr.case-rule{height:0;margin:1.25rem 0 1.25rem;border:0;border-bottom:1px solid var(--line);}
/* Hero summary → body: project-detail-DESIGN §4.4 / §6 — CTA after summary, 56px to Lead */
.markdown-content>blockquote:first-of-type{margin:0 0 1.25rem;padding:0;border:0;color:var(--label-2);}
.markdown-content>blockquote:first-of-type p{margin:0;font-size:1rem;line-height:1.625;}
.markdown-content>blockquote:first-of-type + p{margin-top:3.5rem;}
.markdown-content>blockquote:first-of-type + a.capsule-link{margin:0 0 3.5rem;}
.markdown-content a.capsule-link{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  min-width:0;
  height:52px;
  padding:0 20px;
  border-radius:9999px;
  background:var(--line);
  color:var(--label-1);
  font-family:var(--font-sans);
  font-weight:500;
  font-size:.875rem;
  line-height:1;
  text-decoration:none;
  box-sizing:border-box;
  outline:none;
  transition:background-color .3s ease,color .3s ease;
}
@media (hover:hover){
  .markdown-content a.capsule-link:hover{
    background:rgba(54,54,48,.18);
    color:var(--label-1);
  }
}
.markdown-content a.capsule-link:focus-visible{
  outline:2px solid var(--selection-bg);
  outline-offset:2px;
}
.markdown-content p{margin:0 0 1rem;}
.markdown-content strong{font-weight:600;color:var(--label-1);}
.markdown-content hr:not(.case-rule){height:0;margin:3.25rem 0 1.5rem;border:0;border-top:1px solid var(--line);}
.markdown-content h2{margin:0 0 1rem;color:#2F2F2B;font-size:1.5rem;line-height:1.25;font-weight:600;letter-spacing:-.025em;scroll-margin-top:6rem;}
.markdown-content h3{margin:2.25rem 0 .75rem;color:#2F2F2B;font-size:1.25rem;line-height:1.35;font-weight:600;letter-spacing:-.015em;scroll-margin-top:6rem;}
.markdown-content blockquote:not(:first-of-type){margin:1.25rem 0 1.5rem;padding:.25rem 0 .25rem 1rem;border-left:3px solid var(--selection-bg);color:var(--label-1);}
.markdown-content blockquote:not(:first-of-type) p{margin:0;}

/* Parallel lists — fluorescent green 6.4px dots (project-detail-DESIGN §5.3) */
.markdown-content ul{margin:.35rem 0 1rem;padding:0;list-style:none;color:#3C3C36;font-size:1rem;line-height:1.625;}
.markdown-content ul.case-tags{margin:.85rem 0 0;font-size:inherit;line-height:inherit;}
.markdown-content ul.case-tags li{position:static;padding:0;margin:0;font-family:var(--font-mono-2);font-size:.75rem;text-transform:uppercase;color:var(--label-2);border:1px solid var(--line);padding:.25rem .5rem;}
.markdown-content ul.case-tags li::before{content:none;}
.markdown-content li{position:relative;padding-left:1.05rem;margin:.35rem 0 0;}
.markdown-content li:first-child{margin-top:0;}
.markdown-content ul:not(.case-tags)>li::before{content:"";position:absolute;left:0;top:.68em;width:.4rem;height:.4rem;border-radius:50%;background:var(--selection-bg);}
.markdown-content ol{margin:.35rem 0 1rem;padding:0;list-style:none;color:#3C3C36;font-size:1rem;line-height:1.625;counter-reset:case-step;}
.markdown-content ol>li{counter-increment:case-step;padding-left:1.75rem;}
.markdown-content ol>li::before{
  content:counter(case-step);
  position:absolute;
  left:0;
  top:.12em;
  width:auto;
  height:auto;
  border-radius:0;
  background:none;
  color:var(--selection-bg);
  font-family:var(--font-mono-2);
  font-size:.72rem;
  font-weight:600;
  line-height:1.6;
  letter-spacing:.02em;
}

/* Figures — weak border only, no radius/shadow (§5.8) */
.markdown-content figure.figure{margin:1.5rem 0 1.75rem;}
.markdown-content figure.figure img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#FFFFFF;}
.markdown-content figure.figure figcaption{margin:.5rem 0 0;font-family:var(--font-mono);font-size:.8125rem;line-height:1.6;color:var(--label-2);}

.markdown-content table{border-collapse:collapse;width:100%;margin:1.25rem 0 1.75rem;font-size:.875rem;line-height:1.55;}
.markdown-content th,.markdown-content td{padding:.7rem .85rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.markdown-content th{background:rgba(54,54,48,.03);font-family:var(--font-mono-2);font-size:.6875rem;font-weight:400;text-transform:uppercase;letter-spacing:.04em;color:var(--label-3);}
.markdown-content td:first-child{font-weight:600;color:var(--label-1);white-space:nowrap;}
.markdown-content td{color:var(--label-2);}
.markdown-content tr:last-child td{border-bottom:0;}
.markdown-content table:last-child{margin-bottom:0;}
.markdown-content table + p,
.markdown-content table + h3,
.markdown-content table + ul,
.markdown-content table + figure{margin-top:1.75rem;}
.markdown-content a:focus-visible,.markdown-content button:focus-visible{outline:2px solid var(--selection-bg);outline-offset:2px;}
/* Metadata panel — wallpaper_ai_workflow ending pattern */
.page-meta{
  margin:3.5rem 0 0;
  padding:1.75rem 1.5rem 1.85rem;
  border-radius:20px;
  background:rgba(54,54,48,.06);
  border:0;
}
@media (min-width:720px){
  .page-meta{padding:2rem 2.25rem 2.15rem;}
}
.page-meta__title{
  margin:0 0 1.5rem;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:1.25rem;
  line-height:1.2;
  letter-spacing:-0.02em;
  font-variation-settings:"wdth" 120;
  color:var(--label-1);
}
.page-meta__row{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem 2rem;
}
@media (min-width:720px){
  .page-meta__row{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.page-meta__field h3{
  margin:0 0 .55rem;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:1rem;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--label-1);
}
.page-meta__field p{
  margin:0;
  font-family:var(--font-mono);
  font-size:.9375rem;
  line-height:1.7;
  color:var(--label-2);
  font-variant-numeric:tabular-nums;
}
.page-meta__field p + p{margin-top:.15rem;}
.page-meta__field a{
  color:var(--label-2);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.page-meta__field a:hover{
  color:var(--label-1);
  border-bottom-color:var(--label-3);
}
.page-meta__field a:focus-visible{
  outline:2px solid var(--selection-bg);
  outline-offset:2px;
}
.page-meta__rule{
  margin:1.5rem 0 1.35rem;
  border:0;
  border-bottom:1px dashed var(--label-3);
  opacity:.55;
  height:0;
}
.page-meta__row--links .page-meta__field:first-child h3{margin-bottom:0;}
@media (min-width:720px){
  .page-meta__row--links .page-meta__field:first-child{padding-top:.05rem;}
}

.page-foot{margin-top:3.5rem;}
@media(max-width:640px){.markdown-content table{display:block;overflow-x:auto;max-width:100%;}.markdown-content th,.markdown-content td{min-width:7rem;}}
@media (prefers-reduced-motion: reduce){
  .markdown-content *{animation:none!important;transition:none!important;}
}