*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Barlow',system-ui,sans-serif;color:#18191b}
a{color:inherit}
.site{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(160deg,#ffffff 0%,#fefaf6 55%,#fdf4ea 100%);background-attachment:fixed}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 32px}

/* Header */
.hd{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #e7e4df}
.hd::before{content:"";display:block;height:3px;background:#ee7d11}
.hdin{display:flex;align-items:center;justify-content:space-between;height:82px}
.logo{display:flex;align-items:center}
.logo img{height:52px;width:auto;display:block}
.ext{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#6b6b6b;text-decoration:none}
.ext:hover{color:#ee7d11}
.arr{color:#ee7d11}

/* Main */
.main{flex:1;padding:56px 32px 84px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#ee7d11;margin-bottom:2px}
.phead{margin-bottom:44px}
.ptitle{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:46px;letter-spacing:.01em;margin:8px 0 10px;line-height:1}
.psub{margin:0;color:#6b6b6b;font-size:16px;max-width:540px}

/* Grid */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:26px}
.card{border:1px solid #e7e4df;background:#fff;display:flex;flex-direction:column;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.card:hover{border-color:#d8d3cb;box-shadow:0 14px 34px -20px rgba(0,0,0,.4);transform:translateY(-2px)}
.cimg{width:100%;height:222px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cimg img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.cbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.cname{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;text-transform:uppercase;font-size:19px;line-height:1.08;letter-spacing:.01em;color:#18191b}
.card:hover .cname{color:#ee7d11}
.cview{margin-top:auto;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6b6b6b}
.card:hover .cview{color:#ee7d11}

/* Detail */
.back{display:inline-block;margin-bottom:30px;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b6b6b;text-decoration:none}
.back:hover{color:#ee7d11}
.detail{display:grid;grid-template-columns:1.25fr 1fr;gap:52px;align-items:start}
.dimg{width:100%;height:520px;background:#fff;border:1px solid #e7e4df;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dimg img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.dinfo{padding-top:6px}
.dname{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:40px;line-height:1.03;letter-spacing:.01em;margin:12px 0 26px}
.dnum{font-family:'Barlow Semi Condensed',sans-serif;font-size:22px;font-weight:600}
.dslash{color:#c9c4bc;margin:0 4px}

/* Prev / next */
.pn{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #e7e4df;margin-top:64px;padding-top:26px}
.pnitem{display:flex;flex-direction:column;gap:6px;text-decoration:none;max-width:48%}
.pnr{margin-left:auto;text-align:right;align-items:flex-end}
.pnlbl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b6b6b}
.pnitem:hover .pnlbl{color:#ee7d11}
.pnnm{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;text-transform:uppercase;font-size:18px;color:#18191b;line-height:1.1}

/* Footer */
.ft{background:#18191b;color:#cfcdc9}
.ftin{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.fcopy{font-size:13.5px;letter-spacing:.02em}
.flinks{display:flex;gap:24px}
.flinks a{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#cfcdc9;text-decoration:none}
.flinks a:hover{color:#ee7d11}

@media(max-width:820px){.detail{grid-template-columns:1fr;gap:30px}.dimg{height:400px}.ptitle{font-size:38px}.dname{font-size:34px}}
@media(max-width:560px){.main{padding:40px 0 64px}.wrap{padding:0 20px}.hdin{height:64px}.logo img{height:40px}.ftin{flex-direction:column;height:auto;padding:24px 0;align-items:flex-start}}