/* engraving display fonts (self-hosted, OFL) */
@font-face{font-family:"Playfair Display";src:url("fonts/playfair-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Rye";src:url("fonts/rye-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bebas Neue";src:url("fonts/bebas-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Dancing Script";src:url("fonts/dancing-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ===== PERSONALIZER (loaded only on personalize.html) ===== */

  .app{display:grid;grid-template-columns:1.15fr .85fr;gap:1.5rem;max-width:1120px;margin:0 auto;padding:clamp(1rem,3vw,2rem)}

  @media(max-width:860px){.app{grid-template-columns:1fr}}

  /* PREVIEW */

  .stage{background:var(--walnut-2);border-radius:10px;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;position:sticky;top:1rem;align-self:start}

  @media(max-width:860px){.stage{position:static}}

  .canvas-wrap{background:linear-gradient(160deg,#efe7d6,#d8cbb0);border-radius:8px;overflow:hidden;box-shadow:inset 0 0 40px rgba(42,30,21,.12)}

  canvas{display:block;width:100%;height:auto}

  .stage-actions{display:flex;gap:.6rem;flex-wrap:wrap}

  .stage-actions .hint{font-family:var(--mono);font-size:.66rem;color:var(--hickory);letter-spacing:.04em;flex:1;align-self:center}

  /* CONTROLS */

  .controls{display:flex;flex-direction:column;gap:1.5rem}

  .group>.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brown-mute);margin-bottom:.7rem;display:block}

  .woods{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}

  .wood{cursor:pointer;border:2px solid transparent;border-radius:6px;padding:5px;background:var(--cream);transition:border-color .15s,transform .1s}

  .wood:hover{transform:translateY(-2px)}

  .wood.active{border-color:var(--cherry)}

  .wood .sw{height:44px;border-radius:3px}

  .wood span{display:block;text-align:center;font-size:.75rem;margin-top:.35rem;font-weight:500}

  .tabs{display:flex;gap:.4rem;background:var(--oat-2);padding:.3rem;border-radius:6px}

  .tab{flex:1;text-align:center;padding:.55rem;border-radius:4px;cursor:pointer;font-weight:700;font-size:.9rem;color:var(--brown-mute)}

  .tab.active{background:var(--cream);color:var(--ink);box-shadow:0 1px 3px rgba(42,30,21,.12)}

  .panel{display:none;flex-direction:column;gap:1rem}

  .panel.active{display:flex}

  .presets{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}

  .preset{cursor:pointer;background:var(--cream);border:1px solid rgba(110,90,71,.2);border-radius:6px;padding:.6rem .7rem;font-size:.82rem;transition:border-color .15s}

  .preset:hover{border-color:var(--cherry)}

  .preset b{display:block;font-weight:700;font-size:.85rem}

  .preset small{color:var(--brown-mute);font-size:.7rem}

  .field label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brown-mute);margin-bottom:.35rem}

  .field input[type=text],.field select{width:100%;background:var(--cream);border:1px solid rgba(110,90,71,.28);border-radius:4px;padding:.6rem .7rem;font-family:var(--body);font-size:.95rem;color:var(--ink)}

  .field input:focus,.field select:focus{outline:2px solid var(--cherry);outline-offset:1px}

  .row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}

  input[type=range]{width:100%;accent-color:var(--cherry)}

  .upload-drop{border:1.5px dashed rgba(110,90,71,.4);border-radius:8px;padding:1.6rem 1rem;text-align:center;cursor:pointer;background:var(--cream);transition:border-color .2s,background .2s}

  .upload-drop:hover{border-color:var(--cherry);background:#fbf6ec}

  .upload-drop .mono{font-family:var(--mono);font-size:.7rem;color:var(--brown-mute);letter-spacing:.04em;margin-top:.4rem}

  .note{font-family:var(--mono);font-size:.7rem;line-height:1.7;color:var(--brown-mute);border-left:2px solid var(--cherry);padding-left:.8rem}

  .shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}

  .shape{cursor:pointer;background:var(--cream);border:2px solid transparent;border-radius:6px;padding:6px 3px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:border-color .15s,transform .1s}

  .shape:hover{transform:translateY(-2px)}

  .shape.active{border-color:var(--cherry)}

  .shape canvas{width:40px;height:50px;display:block}

  .shape span{font-size:.6rem;color:var(--brown-mute);font-family:var(--mono);letter-spacing:.03em}

  .modal{position:fixed;inset:0;background:rgba(24,15,8,.6);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:100}

  .modal[hidden]{display:none}

  .modal-card{background:var(--oat);border-radius:12px;max-width:520px;width:100%;max-height:92vh;overflow:auto;padding:1.7rem 1.8rem;position:relative}

  .modal-card h2{font-family:var(--disp);font-size:1.6rem}

  .modal-card .sub{color:var(--brown-mute);font-size:.92rem;margin-top:.35rem}

  .modal-x{position:absolute;top:.7rem;right:1rem;background:none;border:0;font-size:1.7rem;cursor:pointer;color:var(--brown-mute);line-height:1}

  .req-preview{background:var(--walnut-2);border-radius:8px;padding:.8rem;margin:1.1rem 0 .6rem;text-align:center}

  .req-preview img{max-width:100%;max-height:230px;border-radius:4px}

  .req-spec{font-family:var(--mono);font-size:.72rem;color:var(--brown-mute);white-space:pre-line;background:var(--cream);border-radius:6px;padding:.75rem .85rem;margin-bottom:1.1rem;line-height:1.75}

  #reqForm .row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}

  #reqForm .field{margin-bottom:.8rem}

  #reqForm label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brown-mute);margin-bottom:.35rem}

  #reqForm input,#reqForm textarea{width:100%;background:var(--cream);border:1px solid rgba(110,90,71,.28);border-radius:4px;padding:.6rem .7rem;font-family:var(--body);font-size:.95rem;color:var(--ink)}

  #reqForm input:focus,#reqForm textarea:focus{outline:2px solid var(--cherry);outline-offset:1px}

  #reqForm textarea{min-height:78px;resize:vertical}

  #reqForm .btn{width:100%;justify-content:center;margin-top:.3rem}

  .req-done{text-align:center;padding:1.5rem 0}

  .req-done h2{color:var(--pine)}