/* Reuse approved skill variant 5: narration card and an illustration. */
:is(#hook-mechanism,#hook-limits){background:radial-gradient(ellipse at 83% 72%,#EAC78740,transparent 47%),linear-gradient(170deg,var(--surface),var(--honey-soft,#F4E7CC) 74%,#D9C5A1);outline:none}
:is(#hook-mechanism,#hook-limits) .skill5-content{padding:12px 12px 24px;margin:auto}
:is(#hook-mechanism,#hook-limits) h1{font:400 clamp(32px,5.4vw,49px)/1.12 var(--serif);letter-spacing:-.025em;margin:0 0 30px;color:var(--ink)}
:is(#hook-mechanism,#hook-limits) h1 span{color:var(--clay)}
.hook-rule-scene{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:6px}
.hook-rule-label{font:400 21px/1.3 var(--serif);text-align:center;color:var(--ink);padding:12px 16px;border-bottom:2px solid var(--clay)}
.hook-rule-art{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}
.hook-rule-art>svg{width:80px;flex:none;color:var(--muted)}
.hook-rule-art>img{width:150px;height:195px;object-fit:contain}
@media(max-width:650px){
 :is(#hook-mechanism,#hook-limits) .skill5-content{padding:0;margin:auto;width:100%}
 :is(#hook-mechanism,#hook-limits) h1{font-size:34px;margin-bottom:24px}
 :is(#hook-mechanism,#hook-limits) .skill5-layout{grid-template-columns:1fr;gap:24px}
 :is(#hook-mechanism,#hook-limits) .skill5-text p{font-size:21px;line-height:1.4;padding:20px}
 .hook-rule-scene{gap:14px}
 .hook-rule-art>img{height:155px;width:125px}
 .hook-rule-art>svg{width:76px}
 .hook-rule-label{font-size:20px;padding:8px 12px}
}
@media(max-width:650px) and (max-height:670px){
 :is(#hook-mechanism,#hook-limits) h1{font-size:30px;margin-bottom:18px}
 :is(#hook-mechanism,#hook-limits) .skill5-layout{gap:18px}
 :is(#hook-mechanism,#hook-limits) .skill5-text p{font-size:19px;padding:16px}
 .hook-rule-art>img{height:120px;width:105px}
 .hook-rule-scene{gap:10px}
}

@media(max-width:650px){#hook-limits .skill5-text p{font-size:20px}#hook-limits .hook-rule-art>img{height:125px}#hook-limits .hook-rule-scene{gap:10px}#hook-limits .skill5-layout{gap:18px}}
@media(max-width:650px) and (max-height:670px){#hook-limits .skill5-text p{font-size:18px}#hook-limits .hook-rule-art>img{height:100px}}